webpack4.x 相关依赖

前言

最近在工作中遇到了需要自己去使用webpack工具去对项目 es6语法 转为es5版本转化，在项目中使用ES6模块化标准导入导出，所以就需要webpack用一些babel工具进行转化，在这过程中安装webpack版本与相关babel版本不一致。导致webpck编译失败。经过亲自采坑后，觉得webpack这要相关依赖插件版本兼容比较好。

相关版本

"webpack": "4.41.5",

"webpack-cli": "3.3.10",

"webpack-dev-server": "3.10.1"

"@babel/core": "^7.17.9",

"@babel/preset-env": "^7.16.11",

"babel-loader": "8",

babel 相关问题

• 问题1 Q: Requires Babel “^7.0.0-0“, but was loaded with “6.26.3

问题分析：baebl 7 相关的包已经安装完成。但是在编译的时候还是使用了6.x版本的包，可能是webpck 默认使用全局的babel进行编译。

问题测试： 我们使用当前项目下的 node_module下的babel进行编译, 发现可以正常进行编译。

./node_modules/.bin/babel src -d lib

问题解决：

1、我们需要先卸载babel-cli 、babel-core升级全局babel的版本,

npm uninstall babel-cli -g         // 卸载安装在全局babel-cli

npm uninstall babel-core -g        // 卸载安装在全局的babel-core

npm install babel-core@7.0.0-bridge.0 --save-dev      // 全局安装7.0 版本babel-core

2、或者直接使用当前项目node_module里的babel进行编译。

npm i -g @babel/core @babel/cli

// package.json 里
"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --open",
  "lib": "./node_modules/.bin/babel src -d lib"
}
// -d lib 编译输出到lib文件夹

• 问题2 Q：# Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

问题分析：当前webpack版本的插件引起的兼容性问题

问题解决：把node_modules删除掉，替换 package.json里面的主要插件的依赖版本。

"devDependencies": {
  "babel-core": "6.26.0",
  "babel-loader": "7.1.2",
  "clean-webpack-plugin": "^0.1.16",
  "copy-webpack-plugin": "^4.0.1",
  "html-webpack-plugin": "4",
  "webpack":"4.41.5",
  "webpack-cli": "3.3.10",
  "webpack-dev-server": "^3.10.1",
  "babel-preset-env": "^1.6.1",
  "babel-plugin-syntax-dynamic-import": "^6.18.0",
  "node-sass": "^4.10.0",
  }