Webpack4使用babel将新特性的代码转换为旧版浏览器可以兼容的JS代码, 安装步骤如下:
- 安装
babel及依赖
- 安装
babel-polyfill包
- 配置
babel项
- 打包测试
一、安装babel及依赖
1
| npm install -D babel-loader @babel/core @babel/preset-env
|
输出如下:
1
2
3
4
5
| ➜ js git:(dev) ✗ npm install -D babel-loader @babel/core @babel/preset-env
+ @babel/core@7.9.6
+ @babel/preset-env@7.9.6
+ babel-loader@8.1.0
added 92 packages from 13 contributors and updated 2 packages in 10.698s
|
二、安装babel-polyfill包
如果出现 regeneratorRuntime is not defined 错误, 则需要此步骤, 否则可以忽略
1
| npm i -D babel-polyfill
|
输出如下
1
2
3
| ➜ js git:(dev) ✗ npm i -D babel-polyfill
+ babel-polyfill@6.26.0
added 2 packages from 2 contributors in 11.161s
|
三、配置babel项
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| module.exports = {
// 多页面情况
entry: {
sdk: ['babel-polyfill', './src/main.js'], // 入口A
iframe: ['babel-polyfill', './src/iframe.js'], // 入口B
},
// 单页情况
// entry: ['babel-polyfill', './src/main.js'], // 入口
module: {
rules: [
{
test: /\.js$/, // 只编译js文件
exclude: /node_modules/, // 忽略安装包
loader: "babel-loader" // 指定loader
}
]
}
}
|
package.json
注意package.json文件必须为标准的JSON文件
1
2
3
4
5
6
7
| {
"babel": {
"presets": [
"@babel/preset-env"
]
}
}
|
.babelrc配置形式的与package.json配置差别不大, 自行搜索对应
四、 打包测试
查阅
