CSS 优化策略之webpack插件压缩CSS体积

CSS 优化策略之webpack插件压缩CSS体积

对于CSS文件中包含的不必要的字符，例如注释、空白和缩进，我们可以在生产环境中将其删除，以达到减小文件大小的目的，这种技术也叫minification。而这些可以利用webpack构建工具进行实现。

mini-css-extract-plugin

提取CSS

安装插件：

npm install --save-dev mini-css-extract-plugin

webpack.config.js 配置

 const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// css,scss,sass,less
{
   
    test:/\.(sa|sc|c)ss$/,
    use: [
      process.env.NODE_ENV === 'development' ? 'style-loader': MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
    ]
}

//最后对应环境下的plugins中
plugins: [
  new MiniCssExtractPlugin({
   
    filename: "[name].css