如何从 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> 

ma​​in.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 运行时。