总结：手动生成项目中的文件在上一篇文章中，为了演示打包，我们在根目录下创建了一个并导入。 至此，我们已经在项目中成功实现了手动生成文件。 执行，命令行可见文件夹已被删除。
1. webpack中的CommonJS和ESMudule规范 1.1CommonJs规范
CommonJs规范的出发点：JS没有模块系统，标准库较少，缺乏包管理工具； 为了让JS可以在任何地方运行webpack 生成目录，实现用Java、PHP等后台语言开发小型应用程序的能力。
在 CommonJs 规范中：
文件是一个具有多个作用域的模块；
以普通形式定义的变量、函数、对象都属于该模块；
通过require加载模块；
通过exports和modul.exports暴露模块的内容；
1.2 ES模块规格
ES6在语言标准层面实现了模块功能webpack 生成目录，其基本特征如下：
每个模块只加载一次，每个JS只执行一次。 如果上次加载同一目录下的同一文件，则直接从显存中读取；
每个模块中声明的变量都是局部变量，不会污染全局作用域；
模块内部的变量或函数可以通过export导入；
一个模块可以导出其他模块；
模块功能主要由export和import两个命令组成； export命令用于指定模块的外部socket，import命令用于导入其他模块提供的功能：
// esm.js
let firstName = "Jack";
let lastName = "Wang";
export {firstName, lastName}
// export命令除了输出变量，还可以输出函数
export function (a, b) {
return a + b
}
使用export命令定义模块的外部socket后，其他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))
执行npmrunbuild后，打开index.html，可以在控制台看到输出结果。
2.在项目中手动生成HTML文件
上一篇文章中，为了演示打包后的main.bundle.js，我们在根目录下创建了一个index.html，并引入了main.bundle.js。 在实际项目中，我们可以手动生成HTML文件，并通过一个webpack插件：HtmlWebpackPlugin导入我们打包好的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文件；
ject：设置为true则将JS文件注入到body的末尾，将CSS文件注入到head；
minify:removeComments:true表示删除模板文件中的注释，minify的配置选项有很多，请自行参考；
下一步是注释掉我们在index.html中自动引入的脚本：
Title
执行npmrunbuild，可以看到dist目录下有一个index.html，这是HtmlWebpackPlugin生成的文件，打开dist/index.html，main.bundle.js已经手动引入，注释已经删除。
至此，我们已经在项目中成功实现了手动生成HTML文件。
3.清除/dist文件夹
每次执行 npmrunbuild 包时，都会留下之前的代码，导致我们的 /dist 文件夹相当混乱。 一般情况下，建议在每次创建之前清除/dist文件夹。
clean-webpack-plugin是一个比较流行的管理插件，让我们安装和配置：
npm install clean-webpack-plugin --save-dev
在 webpack.config.js 中使用：
const CleanWebpackPlugin = require("clean-webpack-plugin")
添加插件：
new CleanWebpackPlugin(["dist"],{root: path.join(__dirname, "../")})
第一个参数表示文件夹路径列表； 第二个参数是options配置项，root是webpack根文件夹的绝对路径，默认是__dirname，因为dist文件夹和webpack.config.js不再在同一个目录，所以我们需要重新定义根路径，因此很难找到 dist 文件夹。
执行npmrunbuild，命令行可见：
dist 文件夹已被删除。
