webpack 打包警告：The 'mode' option has not been set

最新推荐文章于 2022-02-15 15:46:33 发布

huzhenv5

最新推荐文章于 2022-02-15 15:46:33 发布

阅读量729

点赞数

CC 4.0 BY-SA版权

分类专栏： Webpack 文章标签： webpack 打包模式 mode

本文链接：https://blog.youkuaiyun.com/huzhenv5/article/details/103890799

Webpack 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨Webpack 4的mode配置选项，包括development、production和none三种模式的特性及优化设置。并提供了解决升级后警告的方法，以及如何在package.json和webpack.config.js中进行配置。

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

webpack升级到4之后，有许多坑要踩，其中一个就是打包的时候会多出一条警告：
在这里插入图片描述
这是因为webpack官方在4中新增了： mode 配置选项，告知 webpack 使用相应模式的内置优化。可配置的值是production、development 和 none，默认为production。

解除以上警告有两种方法：
1，在package.json中修改
在package.json的scripts中webpack命令后加上 --mode配置即可，比如使用production配置：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "mocha": "mocha",
    "build": "webpack --mode production"
 }

2，在webpack.config.js中修改
在webpack.config.js中加上mode: 'production’即可，比如使用production配置：

module.exports = {
  mode: 'production'
}

mode有三种模式，官方对三种模式的解释是：

选项	描述
development	会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production	会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。
none	通过DefinePlugin插件将 process.env.NODE_ENV 的值设为 node。使用默认的优化项。

三种模式的详细配置如下：
mode: development
在这里插入图片描述