首页
前端开发
Webpack
Webpack 4CSS打包压缩问题解决方案

Webpack 4CSS打包压缩问题解决方案

0 次浏览 0 条评论
pdf
pdf

最近在调试 webpack4 的时候，遇到了一些踩坑的地方，发现多朋友对 CSS 的打包压缩问题搞得挺头大的。其实，webpack4 是挺强大的，它的配置可以根据环境自动选择打包模式（mode: 'development' 或者 mode: 'production'）。不过，问题来了，CSS 的打包压缩是怎么回事？在打包 JS 的时候，webpack 会根据你设置的 mode 自动进行压缩，但分离出来的 CSS 怎么办呢？这个问题我也琢磨了一会儿，后来通过配置 MiniCssExtractPlugin 和 css-minimizer-webpack-plugin 了，效果蛮不错的。

方案挺简单，只需要配置好相关插件，像这样：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');


module.exports = {
  mode: 'production',
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

设置完成后，Webpack 就会自动帮你 CSS 的压缩，效果跟 JS 一样。想想以前压缩 CSS 好像得自己去找其他插件，今天就算自己没踩坑，也应该庆祝一下！

如果你也碰到类似的情况，可以尝试一下这个配置。感觉还挺好用的。

pdf 文件大小：48.1KB