基于webpack的编译ES6的环境配置

目前现代浏览器对ES6语法的支持可以达到98%,但是还有部分浏览器不支持ES6,所以就需要将ES6编译为所以浏览器能支持的语法。这时就需要Babel了,作为编写下一代JavaScript的编译器,可以和很多工具配合使用来编译ES6。

在这篇文章下记录一下使用webpack和babel-loader来编译ES6。

一个简单的基于webpack的ES6编译环境。已经上传github仓库。地址

安装Node.js

Node.js官网

创建项目目录并安装webpack

首先创建一个项目文件夹

初始化

根目录下在终端中输入:

1
2
npm init -y
// y是yes的缩写,相当于输入 npm init 一路回车

根目录下会生成一个package.json文件,里面包含着项目的信息。

安装webpack

别人写的再好,都不如自己看文档,文档写的更详细,webpack官方文档

在终端中输入

1
2
npm install webpack webpack-cli --save-dev
// 表示在本地安装webpack

会在根目录生成一个node_modules文件夹。

不推荐全局安装。如果你电脑有多个项目,使用的是不同版本的webpack,在运行的时候,是先去找全局的webpack,版本不一样的话会有问题出现。

推荐使用本地安装,使每个项目都有独立的包,不受全局包的影响,方便项目的移动,复制和打包。

使用webpack

项目目录

1
2
3
4
5
6
7
8
9
10
   ES6-Note
|- /node_modules
|- package.json
+ |- webpack.config.js // webpack配置文件
+ |- /src // 根目录
+ |- /css // 放CSS文件
+ |- /js // 放JS文件
+ |- index.js
+ |- /view // 放HTML文件
+ |- index.html

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const path = require('path');

module.exports = {
// 模式,使用开发模式,
//如果是要上线,使用'production',会对代码进行压缩
mode: 'development',
// 入口文件
entry: './src/js/index.js',
// 出口
output: {
// 打包后的文件名
filename: 'js/main.js',
// 文件目录
path: path.resolve(__dirname, 'dist')
}
};

更多的configuration说明可以查看官方文档:configuration docs

src/js/index.js

1
2
3
// 添加一段ES6语法的代码
let a = 10;
console.log(a);

src/view/index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
</html>

package.json

1
2
3
4
5
6
// 在scripts中加入以下代码
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack --config webpack.config.js" // 添加这行代码,
},
// 注:json文件中不能有注释

在终端中执行

1
npm run build

执行这个命令,可以将入口文件打包到出口目录下,就会生成一个dist文件夹,目录结构如下

1
2
3
4
|- /dist
|- /js
|- main.js
|- /src

可以看到main.js文件中包含了index.js的内容

webpack

但是仍然有有两个问题

  • index.html文件并没有被打包到dist中,
  • 打包后的main.js文件仍然是let并没有编译为所有浏览器支持的var

接下来就来解决这两个问题。

babel-loader

使用babel-loader可以对JavaScript ES6语法进行编译。

babel-loader

babel官网

安装

webpack 4.x | babel-loader 8.x | babel 7.x

1
npm install -D babel-loader @babel/core @babel/preset-env

webpack 4.x | babel-loader 7.x | babel 6.x

1
npm install -D babel-loader@7 babel-core babel-preset-env

使用方式

webpack.config.js文件中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}

接着在终端中输入

1
npm run build

可以看到,在main.js中ES6的语法已经被编译为ES5的语法了。

babel-loader

但是index.html仍然没有被打包到dist中,我们可以手动在dist下创建一个html文件,只有在一个文件的时候可以使用这种方式,但是如果项目很大,文件很多。手动创建的话,就会很繁琐。这时候就需要一个webpack的一个插件了。叫做HtmlWebpackPlugin

HtmlWebpackPlugin

这个插件可以将html文件进行打包,具体的使用方式可以看官方文档。

HtmlWebpackPlugin

安装

1
npm install --save-dev html-webpack-plugin

使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
mode: 'development',
entry: './src/js/index.js',
output: {
filename: 'js/main.js',
path: path.resolve(__dirname, 'dist')
},
//plugins: [new HtmlWebpackPlugin()]//这个是默认,也可以添加一些参数
plugins: [
new HtmlWebpackPlugin({
// 模板
template: "./src/view/index.html",
// 输出的地址/dist/...
filename: "view/index.html",
// 标题
title: "ES6-Note",
inject: true,
})
]
};

在终端中输入

1
npm run build

会自动在这个目录下生成html文件,dist/view/index.html,而且会自动引入入口文件打包生成的js文件。

HtmlWebapckPlugin

到此,使用webpackbabel-loader编译ES6已经成功了。

可是确有一点问题,就是不能自动编译,每次修改完原js文件需要再次打包。这是我们就需要一个webpack的一个服务了。webpack-dev-server

webpack-dev-server

webpack-dev-server提供一个简单的web服务,并且可以进行实时重新加载。

安装

1
npm install --save-dev webpack-dev-server

使用方式

webpack.config.js中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
mode: 'development',
// 入口
entry: './src/js/index.js',
// 出口
output: {
filename: 'js/main.js',
// 文件目录
path: path.resolve(__dirname, 'dist')
},
model: {...},
plugins: [...],
+ devServer: {
+ contentBase: './dist'
+ },
};

package.json中添加

1
2
3
4
5
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
+ "start": "webpack-dev-server"
},

在终端中输入

1
npm run start

然后再浏览器中输入localhost:8080,就可以创建的本地服务器。

比如将src/js/index.js改为let a = 30。服务器会自动打包并且浏览器会自动刷新,就可以在console中看到10变为了30。

ctrl + c可以关闭服务器。

总结

综上,通过上面的一系列步骤就可以创建一个最基本的ES6的编译环境。还有很多的工具可以来编译ES6。在babel官网中列出了很多的工具。webpack只是其中一种。

babel

Author: YangLeLe
Link: http://younglele.cn/webpack-config-es6-enviroment/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.