webpack ExtractTextPlugin 提取打包到js中的样式到多个文件

Question

项目使用webpack+react全家桶，在做构建的时候 如果不使用ExtractTextPlugin 那么在组件中引用的scss会打包到模块的js文件中 如果使用了ExtractTextPlugin allChunks: true的时候，则会把所有同步+异步的js中的样式抽取出来 打包成一个大的css文件。

如果我想把各个模块js中的样式提取出来 但是不打包成一个大的 而是对应各个js文件的小的css 该如何配置呢

Answer 1

设置多个ExtractTextPlugin
比如

...
const ExtractTextPlugin1 = require("extract-text-webpack-plugin");
const ExtractTextPlugin2 = require("extract-text-webpack-plugin");

....
    ...
    rules:[
            {
                test:/\.less$/,
                include:[path.resolve(__dirname, "./less")],
                use: ExtractTextPlugin1.extract({
                    fallback: "style-loader",
                    use: [ 'css-loader?minimize=true', 'less-loader' ]
                })
            },
            {
                test:/\.css$/,
                include:[path.resolve(__dirname, "./css")],
                use: ExtractTextPlugin2.extract({
                    fallback: "style-loader",
                    use: [ 'css-loader?minimize=true']
                })
            },
        ]
    ...
        plugins: [
            ...
            new ExtractTextPlugin1('1.css'),
            new ExtractTextPlugin2('2.css')
        ]

这样less文件打包就到1.css,普通css文件打包就到2.css，js里的css也同理。只需要把include文件位置设置好，对应的path打包进对应的ExtractTextPlugin就OK