前注：
文档全文请查看 根目录的文档说明。
如果可以，请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里，发【Issues】。
4、出口
4.1、标准的出口写法
// 出口文件
output: {
filename: './dist/dist.js'
}意思是，将打包好的文件，打包到dist文件夹下的dist.js。
注：
大家一般将打包好的文件会放在dist文件夹下，方便管理。
4.2、出口文件名根据入口文件名所决定：
上面讲了多入口，以及对应的多出口的配置写法，可以参考上面【3】中的内容。
那么假如单入口entry: './app.js',，然后output直接写filename: './dist/[name].js'会发生什么事情呢？
因为入口相当于main: './app.js'，所以打包好的文件名是：main.js。
4.3、设置出口目录
之前我们文件名是统一写的，但在某些情况下（比如根据环境变量来决定出口目录，因此可能存在多个出口目录，在不同情况下【生产/测试】输出到不同目录）。
因此设置方法如下：
output: {
path: __dirname + '/dist',
filename: 'dist.js'
}__dirname是一个绝对路径，指从根目录到当前目录的路径（不带最后一个/），因此path: __dirname + '/dist'指以绝对路径写的到当前目录的dist文件夹下。
注意，这个情况下，path不能用相对路径（如./dist来写），必须写成绝对路径。
而filename就是指输出到该绝对路径下，打包好的文件的名字（参考之前的，是一样的）。
4.4、占位符
在上面，解决多入口文件名的问题时，我们使用了[name]来根据入口文件自动生成文件名。
除了[name]之外，我们往往需要给文件名增加[hash]值来解决缓存的问题（即代码更新后，由于文件名的不同，强制用户下载最新的代码）。
增加方法如下：
...
filename: 'dist.[hash].js'
...原本打包后的文件名为：dist.js，现如今打包后的文件名为（示例）：dist.5099da45ae9fc763852d.js。
如果要限制hash值的长度，可以通过[hash:10]来限制长度（默认是20，这里输出10位）。输出文件名示例为：dist.49b3713789.js
注：使用[hash]时，这里的hash值，即使文件没有改变，每次生成的结果也不同。
如果想让模块没有改变时，hash值不改变，那么应该使用[chunkhash]替代[hash]。
chunk表示模块，chunkhash就是指根据模块内容计算出来的哈希值。
还有一些其他的占位符，以下表格，是我根据官方文档追加写的占位符说明：
| 模板 | 描述 | 特点 |
| [hash] | 模块标识符(module identifier)的 hash | 每次都不同（低版本webpack可能有问题) |
| [chunkhash] | chunk 内容的 hash | 模块内容不变，hash值不变（不能和hash同时使用) |
| [name] | 模块名称 | 就是entry的key，单入口缩写写法默认是main |
| [id] | 模块标识符(module identifier) | 默认情况下是例如'0'，'1'之类 |
| [query] | 模块的 query，例如，文件名 ? 后面的字符串 | 我也没搞懂这个 |
因此一个示例是：
filename: 'dist.chunkhash=[chunkhash:10].name=[name].id=[id].js'具体效果请fork我的项目，并down下来到本地；
然后进入【4、出口文件夹】，在该目录下运行npm run test；
最后查看dist文件夹里生成的js文件。对比webpack.config.js文件中的output属性，对比之。
至于加了哈希值后的文件，如何让html自动引入，下来进行说明。
4.5、引入启用了占位符的打好包文件
在【4.4】中，我们启用了 [hash] 和 [chunkhash] 占位符。
这个占位符，会根据哈希值，在打包好的js文件的文件名中，添加一段hash值。
而这个hash值显然是不可预期的，如果我们每次都在html里手动去写这些js文件名，不仅傻，还容易漏和犯错。
因此我们需要设法解决这个问题。
解决步骤：
- webpack不能全局安装（虽然也可以，但是会造成污染），因此我们先在当前文件夹下安装一次webpack：
npm install --save webpack； - 我们还需要安装一个webpack插件：
npm install --save-dev html-webpack-plugin； - 除此之外，我们需要配置一下webpack文件。做两件事：1、引入插件；2、配置插件；
// webpack.config.js
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口文件，指向app.js
entry: './app.js',
// 出口文件
output: {
path: __dirname + '/dist',
filename: 'dist.chunkhash=[chunkhash:10].name=[name].id=[id].js'
},
// 将插件添加到webpack中
plugins: [
// 这里是添加的插件
new HtmlWebpackPlugin({
title: 'My HTML'
})
]
}最后，如之前一样，运行npm run test，会发现在dist文件夹下，除了之前的js文件，还出现了一个html文件，而这个html文件引入了我们打包好的js文件。
注：
项目里的是已经将依赖加入了package.json，直接运行npm install即可自动安装webpack和该插件。
4.6、同时引入固定资源，以及打包好的文件
在【4.5】中，我们启用了插件，让插件可以自动创建html模板，并让该html文件引入打包好的js文件。
在本章，我们不会深入讲解这个插件，但是需要解决一个常见需求：
- 我通过CDN引入jQuery（或其他类似资源）；
- 并且该资源可能是一个，或者多个；
- 或者是其他已经写在html里的文件内容；
- 我不想在自动打包好html后，再去手动插入
script标签或者其他类似标签； - 因此我希望以某个html文件为模板，额外加入打包好的js文件；
因此我们需要对这个插件进行配置：HtmlWebpackPlugin的文档（英文）
对于这个需求，我们只需要配置一些简单的东西：
···
plugins: [
// 这里是添加的插件
new HtmlWebpackPlugin({
title: 'title', // html的title（就是title标签里的东西）
filename: 'index.html', // 重写后的html文件名，默认是index.html
template: './demo.html', // 这个就是那个模板文件，不会改动原有的内容，而是在原来html文件的末尾，将打包编译好的文件添加进去
})]
···
然后在模板文件里添加一些内容（具体查看文件夹内的 demo.html 文件。
最后一如既往的运行npm run test即可，查看 dist 文件夹下的 index.html 文件。