如何从 Webpack 捆绑 JS 文件中排除 style-loaders、css-loader 源代码？

Posted 2023-02-21

【中文标题】如何从 Webpack 捆绑 JS 文件中排除 style-loaders、css-loader 源代码？

【英文标题】：How can I exclude style-loaders, css-loader source code out of Webpack bundle JS file?

【发布时间】：2021-08-13 13:55:36

【问题描述】：

我正在构建一个简单的 VueJS 应用程序并自己设置 Webpack（不使用 VueJS 默认 Webpack）。

webpack.config.js如下：

module.exports = 
    entry: ['./main.js'],
    module: 
        rules: [
            
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader',
            ,
            
                test: /\.js$/,
                exclude: /node_modules/,
                use: 
                    loader: 'babel-loader',
                    options: 
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    
                
            
            ,
            
                test: /\.css$/,
                exclude: /node_modules/,
                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 源代码？

提前谢谢你。

【参考方案1】：

使用 mini-css-extract-plugin，插件会将所有样式提取到单个 css 文件中，然后不包含 css-loader 和 style-loader 运行时。