webpack学习笔记--webpack解析es6

babel 7.0+版本安装以下依赖

基础：

@babel/core : babel核心文件，它的作用是按照配置的文件进行转码。

@babel/preset-env：es6转es5,但是无法转高级API如Array.from,需要再安装babel-polyfill.

babel-loader

扩展：

@babel/plugin-proposal-class-properties ：支持es6,class Goods类语法

@babel/plugin-transform-runtime ：es6转es5时babel 会需要一些辅助函数，例如_extend。这样文件多的时候，项目就会很大。所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime中，这样做能减少项目文件的大小。

@babel/runtime ：编译模块的工具函数

@babel/runtime-corejs3：提供帮助函数、非全局 API，并且通过引用 regenerator-runtime 提供 regeneratorRuntime 函数

babel 7.4后的版本

@babel/polyfill + core-js@3=@babel/runtime + @babel/runtime-corejs3 + @babel/plugin-transform-runtime

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

// 扩展
npm install babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs3 -D

基础版本：

在webpack.config.js文件中添加

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

 在.babelrc文件中添加

{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
}

 扩展：

在webpack.config.js文件中添加

const path = require('path')

...
module: {
    rules: [{
      test: /.js$/,
      use: 'babel-loader',
      include: path.resolve(__dirname, 'src'), // 需要转换的文件夹
      exclude: /node_modules/ // 排除转换的文件夹
    }]
  }

在.babelrc文件中添加

{
  "presets": [
    [
      "@babel/preset-env",
      // 测试时使用
      {
        "targets": "ie >= 8",
        "useBuiltIns": "entry",
        "corejs": 3
      },
      // 生产打包时使用
      // {
      //   "modules": false,
      //  // "useBuiltIns": "usage",
      //  // "corejs": "3",
      //   "targets": ">0.2%, not dead, Firefox >= 52, IE >= 8"
      // }
    ]
  ],
  "plugins": [
    // 生产打包时使用
    // [
    //   "@babel/plugin-transform-runtime",
    //   {
    //     "corejs": "3",
    //     "helpers": true,
    //     "regenerator": true
    //   }
    // ],
  ]
}

在src中新建index.js

function test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
       let count = 3;
       if (count) {
         resolve(count);
       } else {
         reject(count);
       }
    }, ms)
  })
}
test()

const arr = [1, 2, 3, 4].map(item => item * item)
console.log(arr)

npm run build

打包好bundle.js里的内容：

(() => {
  new Promise((function (n, o) {
    setTimeout((function () {
      n(3)
    }), ms)
  }));
  var n = [1, 2, 3, 4].map((function (n) {
    return n * n
  }));
  console.log(n)
})();