简单粗暴搞定webpack4的babel-loader

改编自微信公众号：前端js动力节点。

还是跟着公众号的小编一步两步一起做吧：

有了前面两节作铺垫，下面的内容就容易的多了。今天我们看一下loader。

 

啥叫loader？从词意上看，load就是加载的意思。加载啥捏？就是各种工具。

也就是说，我们要把代码打成模块、并翻译成浏览器识别的代码，是需要工具协助的。

比如es6，我们要翻译成es5，就需要babel这个工具的支持；再比如css打包，也需要额外的工具支持。

我们今天用es6举例，看一下loaders的具体使用方法。

---

那么在这之前呢，我们还需要稍微了解一下这个babel。

babel这玩意，其实是几个小工具包的集成。

其核心功能位于babel-core这个包里，这个包是必须要引入使用的，就像你用bootstrap必须引入jquery一样。而对于其他你需要的功能或拓展，就需要安装单独的小包。比如解析es6的话，我们需要再装一下babel-preset-env这个工具包。

好，下面我们就来安装一下这些包包们：npm官网上有安装及使用方法https://www.npmjs.com/package/babel-loader

npm install babel-loader babel-core babel-preset-env

安装时间还有一点点久的哦，大家要耐心等待~~

---

好，安装结束后，原料就有了，我们下面还得写测试文件做测试。

我们仍旧沿用前面两节课的例子。不过需要改动两个js文件。

在helloworld.js中，我们写点es6语法，然后exports模块输出；然后在index.js中require引入进来，使用一下。

helloworld.js:

// 输出模块
module.exports = () => {
    // 这里使用了箭头函数，还有let和const关键字哦～～
    let content = "Hello ";
    const NAME = "ES6";
    var div = document.createElement('div');
    div.innerHTML = content + NAME;
    return div;
};

index.js：保持不变。

好啦，测试文件搞定了之后，下面我们重点看一下配置文件webpack.config.js：

// Node.js的一个路径模块，用于操作文件路径
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 注意这里是'dist'而不是'/dist'，不然会报错，Error: EACCES: permission denied, mkdir '/dist'
        filename: "bundle.js"
    },
    module: {
        rules: [{ // 这里用rules而不是loaders
            test: /\.js$/, // 匹配所有js文件
            exclude: /node_modules/, // 排除掉node_modules这个文件夹的js文件
            loader: 'babel-loader', // 加载babel工具包
            options: { // 这里用options而不是query，虽然可以兼容，但是还是按照规则来吧
                presets: ['env'] // 使用es6工具包
            }
        }]
    }
};

test：使用正则表达式，匹配需要loaders处理的文件，必须。

loader：loader的名称，必须。

exclude：屏蔽不需要处理的文件或文件夹，可选。

options：为rules提供额外的设置选项，可选。

---

ok，下面我们运行一下：

然后打开index.html文件看看： 

---

ok，貌似是成功了哈。别急，因为很多浏览器已经支持了es6属性，我们还是打开bundle.js，查验一下到底是否编译成功了： 

这里只截取了一部分，因为太长了，它放在一个eval里。但是箭头函数已经编译为function，然后let和const关键字也被编译成了var，看来确实是成功了哈~~