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 插件一起打包。這個不是
我們想要的。
問題解答
回答1:webpack配置多個entry
entry: { index: [’index.js’,’index.scss’ ], detail: [’detail.js’,’detail.scss’ ], vendor: [’react’,’react-dom’,’common.css’ ]}
相關文章:
1. html - vue項目中用到了elementUI問題2. mysql scripts提示 /usr/bin/perl: bad interpreter3. showpassword里的this 是什么意思?代表哪個元素4. css3 - border-bottom 的長度可否超過盒子的寬度呢?實現如下圖效果。(我的書下面的線)5. android - 用textview顯示html時如何寫imagegetter獲取網絡圖片6. 對mysql某個字段監控的功能7. css3 - css怎么實現圖片環繞的效果8. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?9. JavaScript事件10. mysql優化 - mysql EXPLAIN之后怎么看結果進行優化 ?
