手把手教你webpack3（4）出口（详解）

前注：

文档全文请查看 根目录的文档说明。

如果可以，请给本项目加【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文件名，不仅傻，还容易漏和犯错。

因此我们需要设法解决这个问题。

解决步骤：

1. webpack不能全局安装（虽然也可以，但是会造成污染），因此我们先在当前文件夹下安装一次webpack：npm install --save webpack；
2. 我们还需要安装一个webpack插件：npm install --save-dev html-webpack-plugin；
3. 除此之外，我们需要配置一下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文件。

在本章，我们不会深入讲解这个插件，但是需要解决一个常见需求：

1. 我通过CDN引入jQuery（或其他类似资源）；
2. 并且该资源可能是一个，或者多个；
3. 或者是其他已经写在html里的文件内容；
4. 我不想在自动打包好html后，再去手动插入script标签或者其他类似标签；
5. 因此我希望以某个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 文件。