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’ ]}