extract-text-webpack-plugin如何输出多个css文件？

Question

webpack打包多页面，使用webpack4的splitChunks方法抽离公共库之后CSS文件不能分离

webpack config

// ...
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: 'react',
                chunks: 'all'
            }
        }
     }
},
plugins: [
    ...htmls,
    new ExtractTextPlugin('style/[name].[chunkhash:8].css')
]

不使用 optimization.splitChunks的情况下输出的css文件

index.css
home.css
about.css

使用了之后 只输出一个react.css 并且包含所有的css样式
请教一下大家 如何在抽离了公共库之后还能正常的分离css文件?
谢谢

Answer 1

• 1、webpack 多个单页面入口，需要重复写多个entry;
• 2、webpack entry不支持glob，不可以使用模糊匹配符号
• 3、webpack 会打包所有的css到一个文件，而有需求是分开输出

一、解决webpack会打包所有css到一个文件

入口要命名，分开写，就会分开打包

const entry = require('webpack-glob-entry')
module.exports = [
    {
        entry: {
            index: './src/index.css',
            main: './src/main.css',
        },
        ...
    },

二、解决以css为入口文件时，仍然会输出多余的空js文件

引入修正插件，会删除多余的js文件

npm install -D webpack-fix-style-only-entries

const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries')
module.exports = {
        plugins: [
            new FixStyleOnlyEntriesPlugin(),
            ...
        ],
    },

三、解决webpack不支持glob，模糊匹配问题

npm install -D webpack-glob-entry

const entry = require('webpack-glob-entry')
module.exports = [
    {
        entry: entry('./src/*.scss'),
        ...
    },

四、最终webpack.config.js配置

以下配置用于将多个scss文件转换成多个css文件

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const entry = require('webpack-glob-entry')
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

const baseConfig = {
    module : {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                }),
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, './lib'),
    },
}
module.exports = [
    {
        ...baseConfig,
        entry: entry('./src/*.scss'),
        plugins: [
            new FixStyleOnlyEntriesPlugin(),
            new ExtractTextPlugin({
                filename: `/css/[name].css`,
            }),
        ],
    },
    {
        ...baseConfig,
        entry: entry('./src/component/*.scss'),
        plugins: [
            new FixStyleOnlyEntriesPlugin(),
            new ExtractTextPlugin({
                filename: `/css/component/[name].css`,
            }),
        ],
    },
];