Meils
  • 1.4k

Webpack 之 babel-loader 详解

更新于 2018-03-23  约 7 分钟
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'
        })
    ]
}
阅读 8k更新于 2018-03-23

推荐阅读
目录