javascript - webpack extract-text-plugin 输出多个css文件

Question

我试图让我的 webpack 构建导出 2 个 css 文件，一个用于所有 lib 文件，一个用于我的文件。我需要将这两个文件分别放入我的 main.js 中。Atm 它将所有 css 要求合并到 1 个文件中。

我能够生成文件的唯一方法是拆分条目：

entry: {
    lib:'./style/lib.scss',
    app: [
      './src/index.js',
      './style/style.scss',
    ],
  },

但是生成的 lib.scss 是 style 的副本，而且这个方法也创建了一个冗余的 lib.js。有什么方法可以创建 2 个单独的 css 文件，或者设置任何需要单独导出而不合并到单个文件中的 css？

Answer 1

您可以使用不同的插件实例将 CSS 库与样式分开：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractStyle = new ExtractTextPlugin('style.css');
const extractLib = new ExtractTextPlugin('lib.css');

以及 scss 的不同文件夹：

           {
                test: /\.scss$/i,
                include: resolve(__dirname, './../app/stylesheets'),
                loader: extractLib.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            },
            {
                test: /\.scss$/i,
                include: resolve(__dirname, './../app/src'),
                use: extractStyle.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            }

您可以在此处查看完整示例：https ://github.com/jquintozamora/webpack-multiple-css-output/blob/master/webpack/webpack.config.js