本文共 1235 字,大约阅读时间需要 4 分钟。
npm i -D mini-css-extract-plugin // 不支持代码热更新npm i -D optimize-css-assets-webpack-plugin // 代码压缩合并
mini-css-extract-plugin不支持热更新适合在线上环境使用,在webpack.prod.js配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin')plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[name].chunk.css' })]
还需要更改module里rules的lodaer
{ // css-loader合并所有的css文件 test: /\.css$/, use: [ MiniCssExtractPlugin.loader, // style-loader被替换 'css-loader', 'postcss-loader' ]},{ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', // style-loader被替换 options: { // 加上这个保证 index.scss里引入的scss也经过下面的loader处理 importLoaders: 2, modules: true // css模块化 } }, 'sass-loader', 'postcss-loader' // npm i postcss-loader -D ]},
optimize-css-assets-webpack-plugin代码压缩
style1.css
body { background: red;}
style2.css
body { font-size: 25px;}
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')optimization: { minimizer: [new OptimizeCssAssetsWebpackPlugin({ })]},
使用后合并为
body {background: red; font-size: 25px; }
转载地址:http://gqko.baihongyu.com/