如何解决如何从 Webpack 包 JS 文件中排除样式加载器、css-loader 源代码？
我正在构建一个简单的 VueJS 应用程序并自行设置 Webpack（不使用 VueJS 默认 Webpack）。
webpack.config.js 如下：
module.exports = {
entry: ['./main.js'],module: {
rules: [
{
test: /\.vue$/,exclude: /node_modules/,loader: 'vue-loader',},{
test: /\.js$/,use: {
loader: 'babel-loader',options: {
presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-class-properties']
}
}
},{
test: /\.css$/,use: [
{
loader: 'style-loader'
},{
loader: "css-loader"
}
]
}
]
},plugins: [
new VueLoaderPlugin(),],output: {
path: path.resolve(__dirname,'../wwwroot'),filename: 'js/[name].bundle.js'
}
});
HelloWorld.vue 如下：
<template>
<div class="test">
Hello {{ name }} from Vue!
</div>
</template>
<script>
export default {
data() {
return {
name: 'John'
}
},}
</script>
<style scoped lang="css">
.test{
color: #ffa;
background: #0026ff;
}
</style>
main.js 如下：
import Vue from 'vue'
import HelloWorld from "./HelloWorld.vue";
const app = new Vue({
el: '#app',render: h => h(HelloWorld)
})
在输出文件（捆绑的 JS 文件）中，我看到有 CSS Loader、Style Loader 的源代码：
/***/ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./Views/Home/Index/HelloWorld.vue?vue&type=style&index=0&id=078eef6e&scoped=true&lang=css&":
/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./Views/Home/Index/HelloWorld.vue?vue&type=style&index=0&id=078eef6e&scoped=true&lang=css& ***!
\************************************************************************************************************************************************************************************************************************************************************************************************/
/***/ ((module,__webpack_exports__,__webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__,{
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ "./node_modules/css-loader/dist/runtime/cssWithMappingToString.js");
/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id,"\n.test[data-v-078eef6e]{\n color: #ffa; \n background: #0026ff;\n}\n","",{"version":3,"sources":["webpack://./Views/Home/Index/HelloWorld.vue"],"names":[],"mappings":";AAkBA;IACA,WAAA;IACA,mBAAA;AAEA","sourcesContent":["<template>\r\n <div class=\"test\">\r\n Hello {{ name }} from Vue!\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n name: 'John'//userViewModel.userName,\r\n }\r\n },\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"css\">\r\n \r\n .test{\r\n color: #ffa; \r\n background: #0026ff;\r\n \r\n }\r\n</style> "],"sourceRoot":""}]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
/***/ }),/***/ "./node_modules/css-loader/dist/runtime/api.js":
/*!*****************************************************!*\
!*** ./node_modules/css-loader/dist/runtime/api.js ***!
\*****************************************************/
/***/ ((module) => {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code,injected by the css-loader
// eslint-disable-next-line func-names
module.exports = function (cssWithMappingToString) {
var list = []; // return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item);
if (item[2]) {
return "@media ".concat(item[2]," {").concat(content,"}");
}
return content;
}).join("");
}; // import a list of modules into the list
// eslint-disable-next-line func-names
list.i = function (modules,mediaQuery,dedupe) {
if (typeof modules === "string") {
// eslint-disable-next-line no-param-reassign
modules = [[null,modules,""]];
}
var alreadyImportedModules = {};
if (dedupe) {
for (var i = 0; i < this.length; i++) {
// eslint-disable-next-line prefer-destructuring
var id = this[i][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
}
for (var _i = 0; _i < modules.length; _i++) {
var item = [].concat(modules[_i]);
if (dedupe && alreadyImportedModules[item[0]]) {
// eslint-disable-next-line no-continue
continue;
}
if (mediaQuery) {
if (!item[2]) {
item[2] = mediaQuery;
} else {
item[2] = "".concat(mediaQuery," and ").concat(item[2]);
}
}
list.push(item);
}
};
return list;
};
/***/ }),....
如何从捆绑的输出文件中排除 Style-Loader 和 CSS-Loader 源代码？
提前致谢。
解决方法
使用 mini-css-extract-plugin，插件会将所有样式提取到单个 css 文件中，然后不包含 css-loader 和 style-loader 运行时。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
