javascript - webpack 打包 reactjs项目 css 分离

问题描述

由于打包体积过大，所以用 extract-text-webpack-plugin 把 css 抽出来单独的文件，

{// test: /.scss|css$/i,test: /.scss$/i,use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: require.resolve(’css-loader’), options: {importLoaders: 1,minimize: true,sourceMap: true, }, }, { loader: require.resolve(’postcss-loader’), options: {ident: ’postcss’, // https://webpack.js.org/guides/migrating/#complex-optionsplugins: () => [ require(’postcss-flexbugs-fixes’), autoprefixer({ browsers: [ ’>1%’, ’last 4 versions’, ’Firefox ESR’, ’not ie < 9’, // React doesn’t support IE8 anyway ], flexbox: ’no-2009’, }),], }, }, 'resolve-url-loader', 'sass-loader?sourceMap' ]})},

可是我们希望只把 公共的 css 打包一个 vendor.css ，就像 js 打包一样 ， 有一个 vendor.js 。

比如在 news 详情页组件 加入了 detail.scss ， 他也会被 ExtractTextPlugin 插件一起打包。这个不是

我们想要的。

问题解答

webpack配置多个entry

entry: { index: [’index.js’,’index.scss’ ], detail: [’detail.js’,’detail.scss’ ], vendor: [’react’,’react-dom’,’common.css’ ]}