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'
        })
    ]
}