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