webpack 编译ES6

虽然js的es6是大势之趋，但很多浏览器还没有完全支持ES6语法，webpack可以进行对es6打包编译

需要安装的包有

npm init // 初始化
npm install babel-loader@8.0.0-beta.0 @babel/core
npm install install @babel/preset-env --save-dev
npm install babel-polyfill -save
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime -save

安装完了所有的包，可以测试一下

重点引入 import 'babel-polyfill';

|-- app.js

import 'babel-polyfill';

let func = () => {
};
const NUM = 22;
let arr = [1, 3, 4, 5];
let arrB = arr.map(item => item * 2);
console.log(new Set(arrB));
console.log(arr.includes(1));

function* func2() {
}

当然少不了配置webpack.config.js

重点配置 module

module.exports = {
  entry: {
    app: './app.js'
  },
  output: {
    filename: '[name].[hash:8].js'
  },
  module: {
    rules: [
      {
        // 正则判断js文件使用
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['>1%', 'last 2 versions']
                }
              }]
            ]
          }
        },

        // 除去/node_modules/文件
        exclude: '/node_modules/'
      }
    ]
  }
}