Webpack 之 babel-loader 详解

loader官方解释是文件预处理器，通俗点说就是webpack在处理静态文件的时候，需要使用 loader 来加载各种文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。

---

今天我们来认识的是 babel-loader，用来处理ES6语法，将其编译为浏览器可以执行的js语法。

安装

我们需要用到 babel-loader babel-core babel-preset
配合版本： webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
webpack 3.x babel-loader 7.x | babel 6.x

使用

先来上一个小栗子：

var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,  // (不处理node_modules 和 bower_components下的js文件) 优化处理加快速度
                use: {
                    loader: 'babel-loader',
                    options: {         // options选项
                        presets: ['@babel/preset-env'],  // presets设置的就是当前js的版本
                        plugins: [require('@babel/plugin-transform-object-rest-spread')] // plugin是需要的插件       
                    }
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            inject: 'body',
            filename: 'index.html'
        })
    ]
}

可以使用 options 属性 来给 loader 传递选项：

1. cacheDirectory ： 默认值是false. 当设置了这个值时，指定的目录将会用来缓冲loader的执行结果。之后的webpack 构建，将会尝试读取缓冲，来避免每次都执行时，产生高性能消耗的编译过程。如果提供的时空值或者传入true，那么loader使用默认的缓冲目录 node_modules/.cache/babel-loader 。(如果没有找到node_modules将会往上一级查找)

使用babel-loader可能存在的一些疑问

babel-loader 很慢！

• 解决办法：

1. 要排除 node_modules，参考文档中的 loaders 配置的 exclude 选项。
2. 你也可以通过使用 cacheDirectory 选项，将 babel-loader 提速至少两倍。 这会将转译的结果缓存到文件系统中。

---

上一个自己的例子吧

// app.js  入口文件
import layer from './components/layer/layer.js';  // 这个是需要babel处理的js文件
import './common/common.css';

const app  = function() {
    const a = '我是内容';                        // ES6语法
    console.log(a);    
    // webpack 转换后：                         
    // var a = '我是内容';\n  console.log(a);\n  console.log(_layer.default);\n};\n\nnew app();
    console.log(layer);
};

new app()

// layer.js
// import tep from './layer.html';

function layer() {
    return {
        name: 'layer',
        template: tep
    };
}

export default layer;

// webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,  // 优化处理加快速度
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            inject: 'body',
            filename: 'index.html'
        })
    ]
}