Webpack 配置 Babel 编译 ES6 代码教程

安装 Webpack

首先进行安装操作：


# 本地安装
$ npm install --save-dev webpack webpack-cli

# 全局安装
$ npm install -g webpack webpack-cli

在项目根目录创建配置文件 webpack.config.js：


const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 }
}

在 src 目录下创建文件 a.js：


export const isNull = val => val === null
export const unique = arr => [...new Set(arr)]

在 src 目录下创建文件 index.js：


import { isNull, unique } from './a.js'
const arr = [1, 1, 2, 3]
console.log(unique(arr))
console.log(isNull(arr))

执行编译打包命令，打开生成的 bundle.js 文件，发现 isNull 和 unique 两个函数未被编译。这与 webpack 官方说明一致：webpack 默认支持 ES6 模块语法，但若要编译其他 ES6 代码，仍需借助 babel 编译器。

安装配置 Babel 编译器

使用 Babel 需先安装 @babel/core 和 @babel/preset-env。@babel/core 包含 Babel 核心 API（如 transform），而 @babel/preset-env 是智能预设，允许使用最新 JavaScript 而无需手动管理目标环境的语法转换及 polyfill。因打包工具为 Webpack，还需安装 babel-loader 插件。

安装命令如下：


$ npm install --save-dev @babel/core @babel/preset-env babel-loader

新建 .babelrc 文件：


{
 "presets": [
  "@babel/preset-env"
 ]
}

修改 webpack 配置文件（webpack.config.js）：


const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 },
 module: {
  rules: [
   {
    test: /\.js$/,
     loader: 'babel-loader',
     exclude: /node_modules/
   }
  ]
 }
}

Babel 默认仅转换 ES6 新语法，不转换 Set、Map、Promise 等新 API，因此需安装 @babel/polyfill。同时安装 @babel/plugin-transform-runtime 以优化代码，该插件可复用 Babel 注入的帮助程序代码从而节省体积。

安装 @babel/polyfill 和 @babel/plugin-transform-runtime：


$ npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime

修改 .babelrc 配置文件：


{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage", // 在每个文件中使用polyfill时，为polyfill添加特定导入。利用捆绑器只加载一次相同的polyfill。
   "modules": false // 启用将ES6模块语法转换为其他模块类型，设置为false不会转换模块。
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

最后配置兼容的浏览器环境。在 .babelrc 中设置 targets 属性：


{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage",
   "modules": false,
   "targets": {
    "browsers": "last 2 versions, not ie <= 9"
   }
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

执行命令编译代码，检查 bundle.js 文件以确认新 API 是否成功转换。若发现类似以下代码，则说明转换成功：


// 23.2 Set Objects
module.exports = __webpack_require__(80)(SET, function (get) {
 return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
}, {
 // 23.2.3.1 Set.prototype.add(value)
 add: function add(value) {
  return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
 }
}, strong);

关于 js 压缩和 Webpack 启用 tree shaking 功能的设置本文不再赘述。

配置文件详情概览

package.json 文件内容：


{
 "name": "demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "@babel/core": "^7.3.4",
  "@babel/plugin-transform-runtime": "^7.3.4",
  "@babel/polyfill": "^7.2.5",
  "@babel/preset-env": "^7.3.4",
  "babel-loader": "^8.0.5",
  "webpack": "^4.29.6",
  "webpack-cli": "^3.2.3"
 }
}

webpack.config.js 文件内容：


const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 },
 module: {
  rules: [
   {
    test: /\.js$/,
     loader: 'babel-loader',
     exclude: /node_modules/
   }
  ]
 }
}

.babelrc 文件内容：


{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage",
   "modules": false,
   "targets": {
    "browsers": "last 2 versions, not ie <= 9"
   }
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

附录

usuallyjs 项目是本人近期建设的开源项目，欢迎感兴趣的同行交流。

usuallyjs 仓库地址：https://github.com/JofunLiang/usuallyjs

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

Webpack 与 Babel 配置 ES6 开发环境完整指南

安装 Webpack

安装配置 Babel 编译器

配置文件详情概览

实用工具推荐