多页应用
之前我们的学习都是在单页面(Spa)程序的基础上进行的,在此章节,我们将介绍如何在Webpack中进行多页面应用(Mpa)的构建。
配置代码如下:
const HtmlwebpackPlugin = require('html-webpack-plugin');
const path = require("path");
module.exports = {
entry: {
index: './src/index/index.js',
about: './src/about/index.js',
news: './src/news/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlwebpackPlugin({
// 模板文件
template: './src/index/index.html',
// 输出文件名称
filename: path.resolve(__dirname, 'dist/index/index.html'),
// 引入的chunk,在这里表示只引入生成的index.js
// 默认的会引入 index about news三个js文件
// chunks规定文件引入那些chunk
chunks: ['index']
}),
new HtmlwebpackPlugin({
template: './src/about/index.html',
filename: path.resolve(__dirname, 'dist/about/index.html'),
chunks: ['about']
}),
new HtmlwebpackPlugin({
template: './src/news/index.html',
filename: path.resolve(__dirname, 'dist/news/index.html'),
chunks: ['news']
}),
],
devServer: {
// 默认展示index/index.html
contentBase: path.resolve(__dirname, 'dist/index')
}
}
在这里我们多次使用HtmlwebpackPlugin插件来实现多页面的构建。对于多页面的构建,会产生很多重复的操作,你可以合理的组织项目的页面结构,然后封装一个工具函数,把重复的代码抽离出来,减少重复劳动。在这里还可以使用Web-webpack-plugin插件来实现多页面应用,同样该插件规定你的项目页面结构也是有规律性的。
本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/mpa.zip