Webpack 单页面应用和多页面应用的配置区别

在Webpack中，多页面应用（Multipage Application）和单页面应用（Single Page Application）的配置存在一些区别。下面是它们之间的主要配置区别：

1. 入口配置：

• 多页面应用：每个页面都需要配置独立的入口，即entry配置项中需要配置多个入口文件。

entry: {
  pageA: './src/pageA.js',
  pageB: './src/pageB.js',
  // ...
}

• 单页面应用：只有一个主入口文件。

entry: './src/main.js'

1. 输出配置：

• 多页面应用：输出需要指定多个文件名，使用占位符（placeholder）来保持输出文件的独立性。

output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist')
}

注意占位符[name]会被替换为入口的键名，即生成多个输出文件。

• 单页面应用：输出一个bundle文件。

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
}

1. 页面模板配置：

• 多页面应用：每个页面都需要有对应的HTML模板文件，可以使用HtmlWebpackPlugin插件自动根据模板生成多个HTML文件。

plugins: [
  new HtmlWebpackPlugin({
    template: './src/pageA.html',
    chunks: ['pageA'],
    filename: 'pageA.html'
  }),
  new HtmlWebpackPlugin({
    template: './src/pageB.html',
    chunks: ['pageB'],
    filename: 'pageB.html'
  }),
  // ...
]

• 单页面应用：只需要一个主HTML模板文件，一般可以通过HtmlWebpackPlugin插件生成。

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  })
]

除了上述差异之外，其他常见的Webpack配置项在多页面应用和单页面应用中的配置是相似的，例如loader的配置、插件的配置、devServer的配置等。