推荐使用方法 ③ :
方法 ① : (处理基本的js兼容,缺点:对于promise等无法处理) 所需的插件: babel-loader @babel/preset-env @babel/core
/**
* webpack配置文件
* webpack.config.js
* */
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 打包入口
entry: './src/js/index.js',
// 打包路径
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname,'build')
},
module: {
rules: [
/**
* 定义打包规则:其中所需的插件有 babel-loader @babel/preset-env @babel/core
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设babel做怎样的兼容性处理
presets: ['@babel/preset-env']
}
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "production"
}
方法 ② :(处理全部的js兼容性处理,缺点: 全部都进行处理,体积过大) 使用的插件: @babel/polyfill (babel-loader @babel/preset-env @babel/core)
(ps: 配置与方法 ① 一样,只需在入口文件(如:index.js)引入即可)
// 只需在入口文件引入下面即可
import '@babel/polyfill'
// 下面可忽略
const add = (x, y) => {
return x + y
}
console.log(add(3, 5))
const promise = new Promise(resolve => {
setTimeout(() => {
console.log('定时器执行完成')
}, 1000)
})
方法 ③ (推荐) :(按需加载,体积不会过大,并且仅仅对需要处理的js进行处理) 使用的插件: core-js (babel-loader @babel/preset-env @babel/core)
/**
* webpack配置文件
* webpack.config.js
* */
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: './src/js/index.js',
// 打包路径
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname,'build')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设babel做怎样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性到浏览器的哪个版本
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '50',
edge: '17'
}
}
]
]
}
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "development"
}