共计 2872 个字符，预计需要花费 8 分钟才能阅读完成。
1. webpack 中的 CommonJS 和 ES Mudule 规范
1.1 CommonJs 规范
CommonJs 规范的出发点：JS 没有模块系统、标准库较少、缺乏包管理工具；为了让 JS 可以在任何地方运行，以达到 Java、PHP 这些后台语言具备开发大型应用的能力。
在 CommonJs 规范中：
一个文件就是一个模块，拥有单独的作用域；
普通方式定义的变量、函数、对象都属于该模块内；
通过 require 来加载模块；
通过 exports 和 modul.exports 来暴露模块中的内容；
1.2 ES Mudule 规范
ES6 在语言标准的层面上，实现了模块功能，基本特点如下：
每一个模块只加载一次，每一个 JS 只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取；
每一个模块内声明的变量都是局部变量，不会污染全局作用域；
模块内部的变量或者函数可以通过 export 导出；
一个模块可以导入别的模块；
模块功能主要由两个命令构成：export 和 import；export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能：
// esm.js
let firstName = ‘Jack’;
let lastName = ‘Wang’;
export {firstName, lastName}
// export 命令除了输出变量，还可以输出函数
export function (a, b) {
return a + b
}
使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块，import 命令接受一对大括号，里面指定要从其他模块导入的变量名，大括号里面的变量名，必须与被导入模块对外接口的名称相同。
// main.js
import {firstName, lastName} from ‘./esm’;
function say() {
console.log(‘Hello , ‘ + firstName + ‘ ‘ + lastName)
}
1.3 使用
现在，在 src 目录下新建 sum.js 和 minus.js
// sum.js ES Mudule 规范
// export default 命令，为模块指定默认输出
export default function (a, b) {
return a + b
}
// minus.js commonJS 规范
module.exports = function (a, b) {
return a – b
}
修改 main.js
import sum from ‘./sum’
import minus from ‘./minus’
console.log(‘sum(1, 2): ‘ + sum(1, 2))
console.log(‘minus(5, 2): ‘ + minus(5, 2))
执行 npm run build 之后，打开 index.html，在控制台中可以看到输出的结果。
2. 自动生成项目中的 HTML 文件
在前文中我们为了演示打包好的 main.bundle.js，在根目录下创建了一个 index.html，并引入 main.bundle.js。而在实际项目中，我们可以通过 webpack 的一个插件：HtmlWebpackPlugin 来自动生成 HTML 文件并引入我们打包好的 JS 和 CSS 文件。
安装：
npm install –save-dev html-webpack-plugin
整理项目目录：
在根目录创建 config 文件夹，把 webpack.config.js 移入 config，并修改 webpack.config.js：
const path = require(‘path’)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
const config = {
mode: ‘none’,
entry: {
main: path.join(__dirname, ‘../src/main.js’)
},
output: {
filename: ‘[name].bundle.js’,
path: path.join(__dirname, ‘../dist’)
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, ‘../index.html’),
inject: true,
minify: {
removeComments: true
}
})
]
}
module.exports = config
template：模版文件的路径，这里使用根目录下的 index.html 文件；
inject：设为 true 表示把 JS 文件注入到 body 结尾，CSS 文件注入到 head 中；
minify：removeComments: true 表示删除模版文件中的注释，minify 还有很多配置可选请自行参阅；
下一步注释掉 index.html 中我们手动引入的 script：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”renderer” content=”webkit”/>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
<title>Title</title>
</head>
<body>
<!– <script src=”dist/main.bundle.js”></script> –>
</body>
</html>
执行 npm run build，可以看到，dist 目录下多了一个 index.html，这就是通过 HtmlWebpackPlugin 生成的文件，打开 dist/index.html，已经自动引入了 main.bundle.js 并且注释已被删除。
至此，我们已经成功实现自动生成项目中的 HTML 文件了。
3. 清理 /dist 文件夹
每次执行 npm run build 打包时，都会有上次的代码遗留下来，导致我们的 /dist 文件夹相当杂乱。通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法。
clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下：
npm install clean-webpack-plugin –save-dev
在 webpack.config.js 中使用：
const CleanWebpackPlugin = require(‘clean-webpack-plugin’)
在 plugins 中加入：
new CleanWebpackPlugin([‘dist’],{root: path.join(__dirname, ‘../’)})
第一个参数表示文件夹路径数组；第二个参数是 options 配置项，root 为到 webpack 根文件夹的绝对路径，默认为 __dirname，由于 dist 文件夹和 webpack.config.js 不再相同目录下，因此我们需要重新定义 root 路径，以免无法找到 dist 文件夹。
执行 npm run build，在命令行中可见：
dist 文件夹已被删除了。
本人才疏学浅，不当之处欢迎批评指正
