webpack4 中 CSS 压缩与 JS 压缩冲突的解决方案

webpack4 CSS 与 JS 压缩冲突处理

近期在深入实践 webpack4 时，遇到了诸多配置难题与潜在陷阱。作为开发者，应当具备主动排查问题并解决技术障碍的执着精神，坚持遇到一个坑就填补一个坑的态度。

webpack4 在基础配置层面，允许开发者在 production 和 development 模式之间进行切换与权衡。

// webpack.config.js

module.exports = {
  // webpack会根据mode进行对Js打包，development压缩，production下面自动压缩，亲测没有问题
  mode: 'development' // production
}

然而，当需要将 JavaScript 代码中分离出的 CSS 文件进行打包处理时，如何确保其被有效压缩成为了关键挑战。

经过一整天的资料检索，发现许多文章声称 webpack 自动支持 CSS 压缩，也有观点指出必须借助特定插件。事实确如后者所言，必须使用专用插件来完成此任务。

核心插件为 optimize-css-assets-webpack-plugin。但在选用该插件时，务必仔细查阅 Npm 官方网站的文档说明。

⚠️ For webpack v3 or below please use optimize-css-assets-webpack-plugin@3.2.0. The optimize-css-assets-webpack-plugin@4.0.0 version and above supports webpack v4.

具体实施步骤首先是在项目中安装 optimize-css-assets-webpack-plugin 依赖。

const optimizeCss = require('optimize-css-assets-webpack-plugin');
module.exports = {  
  .....,
  //
  plugins: [
    new optimizeCss({
      assetNameRegExp: /\.style\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { discardComments: { removeAll: true } },
      canPrint: true
    }),
  ],
  // 这个还待研究，看字面意思是优化的意思
  optimization: {
    // minimize: true,
    minimizer: [new optimizeCss({})],

  }  
}

参考相关示例代码后，还需要额外安装 cssnano 包以提供实际的 CSS 压缩处理能力。

随后运行生产环境打包命令，此时 CSS 确实实现了压缩。但检查 JS 文件时发现其未被压缩，而在未添加上述代码前，JS 默认是处于压缩状态的。为此再次搜索解决方案，普遍说法是 webpack4 只需设置 mode 为 production 即可，但当前出现了 CSS 压缩导致 JS 不压缩的冲突。于是尝试安装之前用于压缩 JS 的插件 uglify-webpack-plugin 以验证效果。

最终问题得以解决。这仅是个人的摸索心得，虽属偶然发现，但若各位读者有更好的解决方案，欢迎积极留言交流，共同深入理解 webpack 机制。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。