《基于 Vue 组件库 的 Webpack5 配置》3.将 CSS 提取到单独的文件

• 使用 webpack 插件 mini-css-extract-plugin 需要额外安装 npm i mini-css-extract-plugin@latest -D；

• 同时打包 js 和 css 文件时，可参考 entry 高级用法；

• package.json 的配置如下

  const { VueLoaderPlugin } = require('vue-loader');
  // 可将CSS提取到单独的文件
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  
  module.exports = {
      mode: 'production',
      entry: {
        "my-webcomponents": ['./index.js', './src/assets/stylus/main.styl'],
        "my-webcomponents2": ['./index2.js', './src/assets/stylus/main2.styl'],
      },
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: '[name].js',
          clean: true, 
      },
      plugins: [
          new VueLoaderPlugin(),        
          new MiniCssExtractPlugin({
              filename: "[name].css",
              // filename: "main.css", // 也可以指定名称，但css只会输出一个
          }),
      ],
  }