Webpack教程系列（十二）：Webpack实战:构建多页面应用与 Library

1. 为什么选择构建多页面应用与 Library？

在实际开发中，我们可能会遇到以下需求：

  • 多页面应用（MPA）：一个项目包含多个独立的页面，每个页面有自己的入口和模板。
  • Library：开发一个可复用的库，供其他项目使用。

Webpack 可以帮助我们高效地完成这些任务。本文将介绍如何使用 Webpack 构建多页面应用和 Library。

2. 构建多页面应用

2.1 项目结构

一个典型的多页面应用结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
multi-page-app/
├── src/
│   ├── index/
│   │   ├── index.js
│   │   └── index.html
│   ├── about/
│   │   ├── about.js
│   │   └── about.html
│   └── shared/
│       └── utils.js
├── dist/
├── webpack.config.js
└── package.json

2.2 配置多入口

在 webpack.config.js 中配置多入口：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: './src/index/index.js', // 入口 1
    about: './src/about/about.js' // 入口 2
  },
  output: {
    filename: '[name].bundle.js', // 使用 [name] 占位符
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index/index.html', // 模板 1
      filename: 'index.html', // 输出文件名
      chunks: ['index'] // 仅注入 index 入口的代码
    }),
    new HtmlWebpackPlugin({
      template: './src/about/about.html', // 模板 2
      filename: 'about.html', // 输出文件名
      chunks: ['about'] // 仅注入 about 入口的代码
    })
  ]
};

2.3 编写页面代码

在 src 目录下创建以下文件：

src/index/index.js

1
2
3
import { greet } from '../shared/utils';

greet('Index Page');

src/index/index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index Page</title>
</head>
<body>
  <h1>Welcome to the Index Page!</h1>
</body>
</html>

src/about/about.js

1
2
3
import { greet } from '../shared/utils';

greet('About Page');

src/about/about.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Page</title>
</head>
<body>
  <h1>Welcome to the About Page!</h1>
</body>
</html>

src/shared/utils.js

1
2
3
export function greet(page) {
  console.log(`Hello from ${page}!`);
}

2.4 运行项目

在 package.json 中添加脚本：

1
2
3
4
5
6
{
  "scripts": {
    "start": "webpack serve",
    "build": "webpack --mode production"
  }
}

运行开发服务器：

1
npm start

构建生产环境代码：

1
npm run build

3. 构建 Library

3.1 项目结构

一个典型的 Library 项目结构如下：

1
2
3
4
5
6
7
my-library/
├── src/
│   ├── index.js
│   └── utils.js
├── dist/
├── webpack.config.js
└── package.json

3.2 配置 Webpack

在 webpack.config.js 中配置 Library：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'my-library.js', // 输出文件名
    path: path.resolve(__dirname, 'dist'),
    library: 'MyLibrary', // 库的全局变量名
    libraryTarget: 'umd' // 通用模块定义
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

3.3 编写 Library 代码

在 src 目录下创建以下文件：

src/index.js

1
2
3
4
5
import { greet } from './utils';

export default {
  greet
};

src/utils.js

1
2
3
export function greet(name) {
  return `Hello, ${name}!`;
}

3.4 运行项目

在 package.json 中添加脚本：

1
2
3
4
5
{
  "scripts": {
    "build": "webpack --mode production"
  }
}

构建生产环境代码：

1
npm run build

3.5 使用 Library

将打包后的 my-library.js 引入到其他项目中：

1
2
3
4
<script src="my-library.js"></script>
<script>
  console.log(MyLibrary.greet('World')); // 输出 "Hello, World!"
</script>

4. 总结

本文详细介绍了如何使用 Webpack 构建多页面应用和 Library，包括配置多入口、编写页面代码以及打包 Library。通过这些技巧，你可以更好地应对实际开发中的复杂需求。

在下一篇文章中，我们将深入探讨 Webpack 5 的新特性，学习如何升级到 Webpack 5 并利用其新功能。

预告：

  • 下一篇：Webpack 5 新特性详解