这里使用 babel 处理 js 兼容性问题
1.文件结构
2.安装 babel core-js
$ npm i babel@6.23.0 @babel/core@7.8.4 @babel/polyfill@7.8.3 babel-loader@8.0.6 @babel/preset-env -D
$ npm i core-js@3.6.4 -D
3. 代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </head> <body> <h5>webpack</h5> </body> </html>
index.js
//第二种方式: 全部js兼容性处理 // import '@babel/polyfill' const add = (x, y)=> { return x + y; } console.log(add(1, 2)); const promise = new Promise((resolve)=>{ setTimeout(()=>{ console.log('定时器执行完毕') resolve() },1000) }) console.log("promise:",promise)
webpack.config.js
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: "js/built.js",
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*
js兼容性处理：babel-loader @babel/core
1. 基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，如promise高级语法不能转换
2. 全部js兼容性处理 --> @babel/polyfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> core-js
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
//预设: 指示 babel 做怎样的兼容性处理
presets: [
//presets 这里是俩 中括号!!!!!!!!!!!!!!!!!!!!!!!!!!!
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定 core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "development"
}
4.打包
$ webpack
