webpack入门学习笔记13 —— 使用Webpack打包多页
1. 写在前面
如果你熟悉Vue或者React的话，那么你肯定知道使用这些框架创建的应用属于 单页面应用 。这些框架底层使用的就是Webpack来构建项目，通过对项目文件进行打包编译，最终生成一个 .html 文件，所以我们说这些应用属于 单页面应用。
但是在使用webpack进行构建项目的时候，不仅可以构建单页面应用，还可以构建多页面应用。
在实际的项目中，如果该项目初期使用的就是 脚手架（比如Vue脚手架或者React脚手架） 搭建起来的，那么该项目大多是单页面应用。
但是如果项目在前期不是使用 脚手架 搭建起来的，比如使用 jQuery 库来开发的。但是后期有几个大的业务逻辑，需要使用 Vue脚手架 或者是 React脚手架 来开发，这个时候可能就需要使用Webpack来构建多页面应用，每一个大的业务逻辑对应一个单页面应用。
所以在这篇博客中，我就来跟大家介绍一下如何使用Webpak，构建多页面应用。主要内容包括：
- 如何通过打包编译，生成不同的 .js 文件
- 如何在 .html 文件中，引入指定的 .js 文件
2. 如何通过打包编译，生成不同的 .js 文件
如果你看过我之前的博客，那么你就会知道在 webpack.config.js 文件中，有以下的配置：
module.exports = {
entry: "./src/index.js", // 打包的入口文件，默认是src目录下的index.js文件
output: { // 配置文件默认是dist目录下的main.js文件
filename: "index.js", // 出口文件的文件名
path: path.resolve(__dirname, "build"), //出口文件的路径，注意一定要是绝对路径
}
}
通过以上的配置，webpack就可以找到项目的入口文件（./src/index.js）来对项目进行打包编译，最终生成的就是一个单页面应用。这就给我们提供一个思路：如果我们想要使用webpack打包编译，生成多页面应用，也要通过修改这两个配置属性来完成。
想要构建多页面应用，配置方式非常简单，这里直接给出配置代码，然后再作出解释：
module.exports = {
entry: { // 指定入口文件
'home': "./src/index.js",
'other': "./src/other.js"
},
output: { // 配置文件默认是dist目录下的main.js文件
filename: "[name].js", // 出口文件的文件名
path: path.resolve(__dirname, "build"), //出口文件的路径，注意一定要是绝对路径
},
}
通过上面的代码，我们可以看到，entry 属性的值由字符串变为了对象。在该对象中，我们配置了两个属性，这就表明，我们准备使用webpack来构建 两个 单页面应用，分别是 home 应用和 other 应用。他们都有一个对应的入口文件，webpack在打包编译的时候，就是从他们的入口文件触发，分别构建对应的单页面应用。
同时我们还修改了 output.filename 这个属性，不再是固定的 index.js，而是 [name].js 。这样就可以通过 entry对象 的两个属性（即home和other）来动态生成对应的 .js 文件。
现在你可以在 src文件夹 下创建两个入口文件 index.js 和 other.js ，在里面写对应的代码，然后执行webpack的 build 命令，就可以进行打包编译，最终会生成两个文件，即 index.js 和 other.js ，到这一步多页面应用的 .js 文件已经构建完成了。
3. 如何在 .html 文件中，引入指定的 .js 文件
现在多页面应用的 .js 文件已经构建完成，但是我们还需要在 .html 文件中引入 .js 文件，多页面应用才算是正式完成，所以这一节我们介绍如何在 .html 文件中引入 .js 文件。
想要达到这个目的，我们需要解除 html-webpack-plugin 这一插件的帮助，首先执行以下代码进行安装：
yarn add html-webpack-plugin -D
安装完成之后，到 webpack.config.js 文件中做以下配置：
let HtmlWebpackPlugin = requier('html-webpack-plugin')
module.exports = {
/* 节省篇幅，其余配置已省略 */
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'home.html',
chunks: ['home']
}),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'other.html',
chunks: ['other']
// chunks: ['other', 'home'] // 也可以引入多个 .js 文件
}),
]
}
这里将其他的配置规则省略了，如果你想看其他的配置规则，可以查看我的 GitHub仓库 - webpack-learning ,或者通过本文末尾的链接，跳转到我之前的博客中进行查看。
因为我们这里构建的是两个单页面应用，所以这里要创建两个 HtmlWebpackPlugin 对象，在每个对象中，都有三个属性，这里一一对这些属性做出解释：
-
template: 这是模板文件，webpack会在这个文件中，通过
<script src=""></script>标签引入打包编译生成的 .js 文件，生成最终的 .html 页面文件。 - filename: 在模板文件中引入 .js 文件，会生成一个新的 .html 文件，通过 filename 属性，可以指定生成的 .html 文件的名称。
- chunks: 现在模板文件和打包编译的 .js 文件都已经有了，但是要在模板文件中引入哪些 .js 文件呢？可以通过 chunks 属性来指定。我们可以通过数组的形式，指定一个或多个 .js 文件，这样就可以在模板文件中引入一个或多个 .js 文件。
有了上面的配置，现在执行webpack的 build 命令，就可以进行打包编译，最终最终会生成 home.html 和 other.html 两个文件，也就是两个单页面应用。如此一来，我们就使用webpack成功构建了多页面应用。
4. 写在最后
到此为止，我们如何使用webpack构建多页面应用，并且生成了对应的 .html 文件，现在到项目中，使用这些 .html 文件，就可以使用我们开发的应用了。
