在实际我们的开发中可能需要构建多个页面，对于我们的前端项目而言，在每个页面之间进行切换和操作，需要单独的代码对其进行处理。webpack 提供了一种分离应用程序的方法，将公共的部分提取出来成为一个单独的块，用以支持多页面的单独加载，减小了每个页面所需的代码量，提高代码加载速度。
我们先创建一个包含两个页面的项目：
├─dist
├─src
│ ├─assets
│ │ └─css
│ ├─app.js
│ ├─home.js
│ ├─about.js
│ └─index.html
├─webpack.config.js
├─package.json
└─README.md
其中，home.js 和 about.js 是两个页面独有的 JS 代码，在这里模拟页面个性化代码，将它们分别引入到对应的 HTML 中，如下：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<div id="app"></div>
<script src="assets/js/vendors~app.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/home.js"></script>
</body>
</html>
about.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Page</title>
</head>
<body>
<div id="app"></div>
<script src="assets/js/vendors~app.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/about.js"></script>
</body>
</html>
我们先需要安装一些必要的依赖包：
npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin --save-dev
webpack.config.js 配置如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: path.resolve(__dirname, 'src/app.js'),
home: path.resolve(__dirname, 'src/home.js'),
about: path.resolve(__dirname, 'src/about.js')
},
output: {
filename: 'assets/js/[name].[chunkhash:8].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Home Page',
filename: 'index.html',
chunks: ['app', 'home']
}),
new HtmlWebpackPlugin({
title: 'About Page',
filename: 'about.html',
chunks: ['app', 'about']
})
]
};
在这里，我们使用了 html-webpack-plugin 来实现自动生成 HTML 文件，其中它具备的一些配置项解析如下：
filename：生成后的文件名，可以带有相对路径；chunks：需要引入的代码块，这里我们引入了两个 JS 文件，分别是 app 和 home，并指定了它们所对应的 HTML 文件；在配置文件中完成了这些之后，我们可以执行 npm run build 命令进行测试，分别生成对应的首页和关于页面，文件目录如下：
├─dist
│ ├─assets
│ │ ├─js
│ │ │ ├─about.c399af4f.js
│ │ │ ├─app.f9f6a0f9.js
│ │ │ └─home.c399af4f.js
│ │ └─css
│ │ └─[name].[hash:8].css
│ ├─about.html
│ └─index.html
├─src
│ ├─assets
│ │ └─css
│ │ └─app.bb390ce8.css
│ ├─app.js
│ ├─home.js
│ ├─about.js
│ └─index.html
├─webpack.config.js
├─package.json
└─README.md
在这条攻略中，我们实现了 Webpack 多页面打包的方法。大家可以根据自己的需求，将其应用到自己的项目中，从而提高代码加载速度。
本文链接：http://task.lmcjl.com/news/1201.html