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. html5 - ElementUI table中el-table-column怎么設置百分比顯示。2. python - 使用readlines()方法讀取文件內容后,再用for循環遍歷文件與變量匹配時出現疑難?3. 對mysql某個字段監控的功能4. css3 - less或者scss 顏色計算的知識應該怎么學?或者在哪里學?5. 注冊賬戶文字不能左右分離6. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能7. css - 網頁div區塊 像蘋果一樣可左右滑動 手機與電腦8. javascript - 數組的過濾和渲染9. html - vue項目中用到了elementUI問題10. JavaScript事件
