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