在Webpack中,多页面应用(Multipage Application)和单页面应用(Single Page Application)的配置存在一些区别。下面是它们之间的主要配置区别:
- 入口配置:
- 多页面应用:每个页面都需要配置独立的入口,即entry配置项中需要配置多个入口文件。
entry: {
pageA: './src/pageA.js',
pageB: './src/pageB.js',
// ...
}
- 单页面应用:只有一个主入口文件。
entry: './src/main.js'
- 输出配置:
- 多页面应用:输出需要指定多个文件名,使用占位符(placeholder)来保持输出文件的独立性。
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
注意占位符[name]
会被替换为入口的键名,即生成多个输出文件。
- 单页面应用:输出一个bundle文件。
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
- 页面模板配置:
- 多页面应用:每个页面都需要有对应的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的配置等。