Webpack 配置 babel-loader 实现 ES6 转译详解

Webpack 中 Loader 的作用

根据官方定义，Loader 是文件预处理器。通俗而言，Webpack 在处理静态资源时依赖 Loader 加载各类文件，例如 HTML 文件需使用 html-loader，CSS 文件则需配合 css-loader 和 style-loader 等。

babel-loader 的功能介绍

本文重点介绍 babel-loader，其主要功能是将 ES6 语法编译转换为浏览器可直接执行的 JavaScript 代码。

安装与环境配置

安装步骤

配置过程中需要引入 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

Webpack 配置示例

具体配置

首先通过一个简单示例进行演示。

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设置的就是当前js的版本
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'index.html',
      inject: 'body',
      filename: 'index.html'
    })
  ]
}

可以通过 options 属性向 Loader 传递配置参数。

以上内容为本文的全部介绍，希望对读者的学习有所帮助，也欢迎大家继续支持本站。