webpack 多个入口输出多个文件解决方案 webpack 输出多个css文件

• 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`,
            }),
        ],
    },
];