webpack 3.X学习之多页面打包的方法

前言

在实际我们的开发中可能需要构建多个页面，对于我们的前端项目而言，在每个页面之间进行切换和操作，需要单独的代码对其进行处理。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>

配置webpack

我们先需要安装一些必要的依赖包：

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