WARNING in configuration The ‘mode‘ option has not been set

原创已于 2022-03-11 12:48:46 修改

· 1.3k 阅读

1 ·

版权

文章标签：

#webpack #webpack设置开发者模式 #前端框架webpack

于 2022-03-11 06:06:45 首次发布

本文档指导如何解决Webpack初始化时的`mode`未设置警告及HtmlWebpackPlugin使用中出现的`tap`属性错误。首先，通过在webpack.config.js中设定`mode`为'development'或'production'来消除警告。如果遇到HtmlWebpackPlugin不兼容问题，可更新相关依赖至与webpack版本匹配的版本，例如提供的一份package.json示例，并使用`yarn install`和`yarn build`重新安装和运行。

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

一.WARNING in configuration The ‘mode‘ option has not been set

初始化webpack.config.js

去除警告 文档
在这里插入图片描述
步骤
1.新建文件webpack.config.js，打开文档复制粘贴

const path = require('path');

module.exports = {
    mode: 'development' //'production'
};

设置main.js为开发者模式,方便自己阅读或者debug调试。
如果是正在开发中可以设置为development，如果你正要发布可以设置为production。
2.重新运行

终端:npx webpack

二.Cannot read property ‘tap’ of undefined

在安装html插件(HtmlWebpackPlugin)后重启时报错.

原因: html-webpack-plugin与webpack版本对应问题
warning " > html-webpack-plugin@5.5.0" has incorrect peer dependency "webpack@^5.20.0".
方法
1.先复制下面的package.json覆盖你的"devDependencies"

"devDependencies": {
    "css-loader": "^3.2.0",
    "dart-sass": "^1.23.7",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }

2.然后