webpack4+升级到webpack5+的变化

kiscon

于 2021-10-28 16:40:19 发布

阅读量828

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端点滴文章标签： webpack javascript 前端

本文链接：https://blog.youkuaiyun.com/kiscon/article/details/121017560

前端点滴专栏收录该内容

22 篇文章

订阅专栏

这篇博客介绍了Webpack5中的一些关键更新，包括用css-minimizer-webpack-plugin替换optimize-css-assets-webpack-plugin以优化CSS压缩，webpack-merge引入方式的变化，以及devServer的overlay配置在client参数下的调整。此外，还提醒开发者注意splitChunks.name不能设置为true，以避免不必要的chunk命名更改。对于Webpack升级和配置更新的开发者来说，这些信息至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css-minimizer-webpack-plugin替换optimize-css-assets-webpack-plugin

For webpack v5 or above please use css-minimizer-webpack-plugin instead.

webpack-merge 引入方式

// 4.+
const merge = require('webpack-merge')
// 5.+
const { merge } = require('webpack-merge')

devServer的overlay调整在client参数下

// 4.+
module.exports = {
  devServer: {
    overlay: {
      errors: true,
      warnings: false
    }
  }
}
// 5.+
module.exports = {
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false
      }
    }
  }
}

devtool

// 4.+
module.exports = {
  devtool: 'cheap-eval-source-map',
}
// 5.+
module.exports = {
  devtool: 'eval-cheap-source-map',
}

splitChunks.name 不能设置为true

拆分 chunk 的名称。设为 false 将保持 chunk 的相同名称，因此不会不必要地更改名称。

项目地址