Webpack基础应用篇-[10]1.7 使用 babel-loader

前面的章节里，我们应用 less-loader编译过 less 文件，应用 xml-loader编译过 xml 文件，那 js 文件需要编译吗？我们来做一个实验，修改 hello-world.js文件：

执行编译：

[felix] 08-babel-loader $ npx webpack

查看 bundle.js 文件：

我们发现，编写的ES6代码原样输出了。启动服务，打开浏览器：

[felix] 08-babel-loader $ npx webpack serve

1.7.1 为什么需要 babel-loader

webpack 自身可以自动加载JS文件，就像加载JSON文件一样，无需任何 loader。可是，加载的JS文件会原样输出，即使你的JS文件里包含ES6+的代码，也不会做任何的转化。这时我们就需要Babel来帮忙。Babel 是一个 JavaScript 编译器，可以将ES6+转化成ES5。在Webpack里使用Babel，需要使用 babel-loader。

1.7.2 使用 babel-loader

安装：

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

• babel-loader: 在webpack里应用 babel 解析ES6的桥梁
• @babel/core: babel核心模块
• @babel/preset-env: babel预设，一组 babel 插件的集合
  在 webpack 配置中，需要将 babel-loader 添加到 module 列表中，就像下面这样：

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

执行编译：

[felix] 08-babel-loader $ npx webpack

查看 bundle.js 文件：

从编译完的结果可以看出，async/await 的ES6语法被 babel编译了。

1.7.3 regeneratorRuntime 插件

此时执行编译，在浏览器里打开项目发现报了一个致命错误：

regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容async/await的语法。

regeneratorRuntime is not defined这个错误显然是未能正确配置babel。

正确的做法需要添加以下的插件和配置：
/# 这个包中包含了regeneratorRuntime，运行时需要
npm install --save @babel/runtime

/# 这个插件会在需要regeneratorRuntime的地方自动require导包，编译时需要
npm install --save-dev @babel/plugin-transform-runtime

/# 更多参考这里
https://babeljs.io/docs/en/babel-plugin-transform-runtime

接着改一下babel的配置：

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [
            [
              '@babel/plugin-transform-runtime'
            ]
          ]
        }
      }
    }
  ]
}

启动服务，打开浏览器：