使用 MiniCSSExtractPlugin 和 Webpack 4 输出两个不同的 CSS 文件答案

【问题标题】：Output two different CSS files using MiniCSSExtractPlugin with Webpack 4使用 MiniCSSExtractPlugin 和 Webpack 4 输出两个不同的 CSS 文件
【发布时间】：2019-06-08 06:08:20
【问题描述】：

我的 ./src 目录中都有 SCSS 文件，即 editor-[...].scss 或 frontend-[...].scss，我的目标是设置 MiniCSSExtractPlugin，使其接收这些 scss 文件并基于它是否为 @ 987654325@ 或 frontend- 将其输出到不同的 CSS 文件中。

我现在有

             {
                test: /\.(css|scss)$/,
                use: [ {
                    loader: MiniCssExtractPlugin.loader
                },
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require( 'autoprefixer' )
                        ]
                    }
                },
                {
                    loader: 'sass-loader',
                    query: {
                        outputStyle:
                            'production' === process.env.NODE_ENV ? 'compressed' : 'nested'
                    }
                } ]
            },

然后

plugins: [
        new MiniCssExtractPlugin({
            filename: './build/myawesomeapp-editor.css'
        })
]

我似乎不知道如何设置两个输出。我知道我必须使用正则表达式来查找文件，但我不知道如何在我这样做之后将它们提取到不同的文件中。

【问题讨论】：

该插件/加载器无法使用该选项。

标签： webpack mini-css-extract-plugin

【解决方案1】：

我知道这个问题现在有点老了，但我自己花了几天时间试图解决这个问题。诚然，现阶段我对 webpack 了解不多，所以它确实花费了比预期更长的时间。

我最终做的是这里指定的 https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry

我如何实现它是创建一个配置 json 文件，其中包含需要使用的 scss 文件列表

{
   "file1": {
      "scss": "file1",
   },
   "file2": {
      "scss": "file2",
   },
}

（为什么我的特定设置在这里没有使用数组是有原因的）

然后在我的webpack.config 文件中，我有以下内容

const themeConfig = require('./src/config/themes.json');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const _ = require('lodash');

然后我循环配置以创建特定于主题的拆分块配置

// specify the theme split chunk config
let themeChunks = {};
let themeFiles = [];
for (let i in themeConfig) {
  const theme = themeConfig[i];
  themeChunks[_.camelCase(`theme_${i}`)] = {
    name: `theme-${theme.css}`,
    test: new RegExp(`src\/resources\/styles\/themes\/${theme.css}.scss$`),
    chunks: 'all',
    enforce: true,
  };

  themeFiles.push(`./src/resources/styles/themes/${theme.css}.scss`);
}

注意：测试行应该是你的 scss 文件的路径

那我的条目是这样的

entry: {
    app: ['./src/app.js'],
    themes: themeFiles
  },

我的分割块看起来像这样

splitChunks: {
  hidePathInfo: true, 
  chunks: "initial",
  maxSize: 200000, 
  cacheGroups: {
    default: false,

    // add the theme config
    ...themeChunks,
  }
}

最后是我的规则


{
  test: /\.scss$/,
  use: [
    { loader: MiniCssExtractPlugin.loader, },
    { loader: 'css-loader' },
    { loader: 'sass-loader' }
  ],
},

这是基于dwatts3624https://github.com/webpack-contrib/mini-css-extract-plugin/issues/45#issuecomment-425645975的示例

我希望这对遇到此问题的人有所帮助

【讨论】：