webpack babel-CSDN博客

本文链接：https://blog.csdn.net/weixin_43374360/article/details/124863643

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>