由于 webpack 版本较多, 而且配置写法, 每个版本都大大小小有差异, 因版本问题造成的错误很多
1 下载指定版本我常用的版本 3.3.0,
2 不同版本中的坑
2.1 在 3.0 之后版本配置 entry 和 output 路劲不再支持相对路径只能使用__dirname 拼接成的绝对路径)
- var path=require('path');
- path.join(__dirname,'')
2.2 在版本 4 之后安装常用的 html-webpack-plugin 插件, 在打包时会报错, 因为 4.0 之后安装 html-webpack-plugin 增加了依赖 (为此我将版本还是进行了降级)
2.3 注意全局的 webpack 版本和项目中的 webpack 版本冲突问题, 有时候你会发现自己安装的明明是 3.0 版本, 却还是用 4.0 打包的, 那是因为你安装了全局的 webpack 为 4.0
解决方案:
cnpm uninstall webpack -g
卸载全局的 webpack
cnpm i webpack@3.3.0 -g
重新安装指定版本的 webpack
2.4 在 4.0 之后的版本 mode 为必须配置的选项, 否则会报错
解决 1:
webpack --mode development
解决 2:package.json 中配置
- "scripts": {
- "start": "--mode development",
- "build": "--mode production"
- }
2.5 在 2.0 版本后 module 中的 loader 配置叫做 rules, 但是在 1.0 当中叫做 loaders
3 版本迁移造成的错误处理
3.1webpack 打包过程中如果你发现常用的 node 内置模块一直报错
比如: cannot find module "minimatch"
解决 1: 确认环境变量 ok,cmd 中查看 node -v 是否报错, 报错的话就重新配置环境变量或者 node 卸载重装 (node 默认安装会自己配置环境变量)
解决 2:node 环境 ok 的情况下就是 node_module 包出错了
1 删除 node_module 文件夹
- cnpm cache clean
- cnpm install
来源: https://www.2cto.com/kf/201807/763781.html