babel-loader

一、babel-loader

babel-loader在Babel教程的 babel-loader一节简单介绍过，本节详细说明其使用方法。

babel-loader这个loader主要作用是在Webpack打包的时候，用Babel将ES6的代码转换成ES5版本的。

使用babel-loader的时候需要先安装相应的npm包

  # 安装Babel核心包以及babel-loader
  npm install @babel/core@7.11.1 babel-loader@8.1.0

我们选择使用@babel/preset-env这个Babel预设进行转码，所以我们也安装它。

  npm install @babel/preset-env@7.11.1

如果你对Babel的使用不太熟悉，可以学习一下Babel教程

我们要转换前的代码如下，

  // a.js
  let add = (a, b) => a + b;
  console.log(add(3, 5));

使用到的ES6语法有两个，let变量声明语法和箭头函数语法。火狐27.0不支持let变量声明语法，直接在该浏览器打开引用了该文件的html会报错。

因为我们这节课主要讲Webpack打包过程中babel-loader的使用，所以接下来我们观察使用babel-loader把ES6的代码转换成ES5的后，会不会把上面的报错消灭掉。

我们首先不使用babel-loader观察一下运行结果，然后再使用babel-loader打包观察运行结果。

二、不使用babel-loader

不使用babel-loader的webpack.config.js的配置如下，配套github仓库 https://github.com/jruit/webpack-tutorial 的webpack3-2

  const path = require('path');

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    mode: 'none'
  };

安装相应的npm包后执行npx webpack打包，我们发现即使没有使用babel-loader，Webpack仍然可以完成打包。

我们观察一下打包后的bundle.js代码，发现ES6的代码没有发生转换，如下图。

接着在html文件里引入bundle.js，在火狐27.0打开，报错。报错信息与之前的直接引入a.js是一样的。

于是我们得出一个结论，在Webpack打包JS文件的时候，如果不使用babel-loader，可以完成打包，打包后的ES6的代码不会转换成ES5。

三、使用babel-loader

我们在配置文件webpack.config.js里加入babel-loader，配套github仓库 https://github.com/jruit/webpack-tutorial 的webpack3-3

  const path = require('path');

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    },
    mode: 'none'
  };

注意，我们除了使用了babel-loader，还增加了配置项options，该配置项与Babel配置文件里的是基本一致的，这里我们使用了@babel/preset-env。

安装相应的npm包后，执行npx webpack打包，观察打包后的代码如下

我们发现ES6的代码已经转换成了ES5的，在火狐27.0打开相应的html文件，控制台日志正常输出3+5的结果8。

babel-loader配置项options除了正常的Babel配置文件的配置项，还可以开启缓存。通过增加cacheDirectory:true项，开启缓存，在初次打包后再次打包，如果JS文件未发生变化，可以直接使用初次打包后的缓存文件，避免了二次转码，有效提高打包速度。

            use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['@babel/preset-env']
            }
          }

对于Babel配置复杂的情况，我们可以在工程根目录单独建立一个Babel配置文件，例如babel.config.js。presets和plugins等配置项就不写在babel-loader的options里了，而是放在babel.config.js，babel-loader会自动读取使用其默认配置文件的配置。

小结

本节主要讲了babel-loader的使用，该loader在Webpack打包的时候可以把ES6的代码转换成ES5的。更多关于其使用的细节，需要结合Babel的知识，可以参阅 Babel教程