博客站

配置 Webpack 支持多页面应用（MPA）需要为每个页面设置独立的入口（Entry）和 HTML 模板。以下是详细的配置步骤：

1. 项目结构

假设项目结构如下：

project/
├── src/
│   ├── index/
│   │   ├── index.js
│   │   └── index.html
│   ├── about/
│   │   ├── about.js
│   │   └── about.html
├── dist/
├── webpack.config.js

2. 安装依赖

需要安装以下插件：

• html-webpack-plugin：用于生成 HTML 文件。

npm install html-webpack-plugin --save-dev

3. 配置 Webpack

在 webpack.config.js 中配置多页面应用的入口和 HTML 模板。

示例配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 多页面配置
const pages = [
  {
    name: 'index',
    entry: './src/index/index.js',
    template: './src/index/index.html',
    filename: 'index.html'
  },
  {
    name: 'about',
    entry: './src/about/about.js',
    template: './src/about/about.html',
    filename: 'about.html'
  }
];

module.exports = {
  entry: pages.reduce((config, page) => {
    config[page.name] = page.entry;
    return config;
  }, {}),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  plugins: pages.map(page => new HtmlWebpackPlugin({
    template: page.template,
    filename: page.filename,
    chunks: [page.name] // 指定需要注入的 chunk
  })),
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  mode: 'development'
};

4. 配置详解

入口（Entry）

• 使用 pages.reduce 动态生成入口配置。
• 每个页面的入口文件会被打包成独立的 chunk。

输出（Output）

• filename: '[name].bundle.js'：根据入口名称生成对应的输出文件。

HTML 模板

• 使用 html-webpack-plugin 为每个页面生成 HTML 文件。
• template：指定 HTML 模板路径。
• filename：指定生成的 HTML 文件名。
• chunks：指定需要注入的 chunk（即对应的入口文件）。

5. 运行 Webpack

运行以下命令打包项目：

npx webpack

打包后的文件会输出到 dist 目录中，结构如下：

dist/
├── index.bundle.js
├── index.html
├── about.bundle.js
└── about.html

6. 开发服务器配置

如果需要使用 webpack-dev-server，可以在 webpack.config.js 中添加 devServer 配置：

devServer: {
  static: {
    directory: path.join(__dirname, 'dist'),
  },
  compress: true,
  port: 9000,
  hot: true,
  open: true
}

然后运行：

npx webpack serve

7. 完整配置文件示例

以下是一个完整的 Webpack 配置文件，支持多页面应用和开发服务器：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 多页面配置
const pages = [
  {
    name: 'index',
    entry: './src/index/index.js',
    template: './src/index/index.html',
    filename: 'index.html'
  },
  {
    name: 'about',
    entry: './src/about/about.js',
    template: './src/about/about.html',
    filename: 'about.html'
  }
];

module.exports = {
  entry: pages.reduce((config, page) => {
    config[page.name] = page.entry;
    return config;
  }, {}),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  plugins: pages.map(page => new HtmlWebpackPlugin({
    template: page.template,
    filename: page.filename,
    chunks: [page.name]
  })),
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
    hot: true,
    open: true
  },
  mode: 'development'
};

8. 总结

配置 Webpack 支持多页面应用的关键步骤包括：

1. 为每个页面设置独立的入口和 HTML 模板。
2. 使用 html-webpack-plugin 生成 HTML 文件。
3. 动态生成入口配置和插件配置。

通过以上配置，Webpack 可以高效地打包多页面应用，并支持开发服务器的实时重新加载和热模块替换功能。