webpack4 打包ES5/6

babel-loader

安装

npm install -D babel-loader @babel/core @babel/preset-env

配置

　　babel-preset

　　　　规范的总结 一般使用env

　　　　es2015

　　　　es2016

　　　　es2017

　　　　env

　　　　babel-preset-react

　　　　babel-preset-stage 0-3

 

module.exports = {

  entry: {
    app: './app.js'
  },
  
  output: {
    filename:'[name].[hash].js'
  },

  module:{
    rules: [
      {
        test: /.\js$/,
        exclude:/node_modules/,
        use: {
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
        }
      }
    ]
  },
  mode: 'development'
}

Babel Presets

　　targets

　　targets.browsers

　　　　last 2 versions

　　　　> 1%

修改参数配置如下

module.exports = {

  entry: {
    app: './app.js'
  },
  
  output: {
    filename:'[name].[hash].js'
  },

  module:{
    rules: [
      {
        test: /.\js$/,
        exclude:/node_modules/,
        use: {
          loader:'babel-loader',
          options:{
            presets:[
              ['@babel/preset-env', {
                targets: {
                  browsers: ['> 0.2%']
                }
              }]
            ]
          }
        }
      }
    ]
  },
  mode: 'none'
}

接下来我们看下我们打包的js文件内容

const fun = () => {
  return 1+2
}

let arr = [1,2,3,4]

arr.includes(2)

console.log(new Set(arr))

我们使用browsers: ['> 0.2%']打包后的js文件

/******/ ([
/* 0 */
/***/ (function(module, exports) {

var fun = function fun() {
  return 1 + 2;
};

var arr = [1, 2, 3, 4];
arr.includes(2);
console.log(new Set(arr));

/***/ })

接下来我们修改配置

  module:{
    rules: [
      {
        test: /.\js$/,
        exclude:/node_modules/,
        use: {
          loader:'babel-loader',
          options:{
            presets:[
              ['@babel/preset-env', {
                targets: {
                  browsers: ['chrome 62']
                }
              }]
            ]
          }
        }
      }
    ]
  }

我们看下输出结果

/* 0 */
/***/ (function(module, exports) {

const fun = () => {
  return 1 + 2;
};

let arr = [1, 2, 3, 4];
arr.includes(2);
console.log(new Set(arr));

/***/ })

 

我们看出我们修改targets的不同，输出结果不同，

browsers: ['chrome 62'] 输出结果有箭头函数

browsers: ['> 0.2%']是没用箭头函数

　　browsers可选配置可以参考 https://github.com/browserslist/browserslist

 

Babel Polyfill 

　　之前我们是针对语法 ，而且针对函数和方法需要使用这2个

　　上面的Set在低版本浏览器无法使用

　　Generator  Set Map Array.from

首先我们先介绍下Babel Polyfill　　

　　这是一个全局垫片

　　　　引入这个使用会进行全局定义，也就是会造成全局污染

　　　　这是为开发应用装备

　　　安装和使用

npm install --save @babel/polyfill

import "@babel/polyfill";

打包结果

/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);


var fun = function fun() {
  return 1 + 2;
};

var arr = [1, 2, 3, 4];
arr.includes(2);
console.log(new Set(arr));

Babel Runtime Transform

　　这是一个局部垫片 不会造成全局污染

　　是为开发框架装备的

　　安装和使用

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

plugins:['@babel/transform-runtime']

 　　这里打包之后跟没引入babel/plugin-transform-runtime一样，回头看下哪里问题