webpack babel

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值