index.js文件
// @babel/polyfill会将es6所有的兼容性都引入。但是我们可能只使用某一部分。
// 我们需要按需加载(使用了什么ES6语法,就引入相应的兼容性处理)
// import '@babel/polyfill';
const promise = new Promise((resolve) => setTimeout(resolve, 1000));
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
console.log(promise);
const p = new Person('jack', 18);
console.log(p);
webpack配置
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: resolve(__dirname, 'build'),
filename: './js/built.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage', // 实现按需加载
corejs: {
version: 3,
proposals: true
},
targets: { // 兼容到哪些版本的浏览器
chrome: "58",
ie: "9",
firefox: "58"
}
}
]
]
}
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'production'
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>polyfill</title>
</head>
<body>
<h1>hello polyfill</h1>
</body>
</html>