本文介绍如何使用Webpack配置多页面应用，包括定义不同页面的入口文件、设置HTML模板及加载对应的JavaScript文件。通过具体示例展示了多页面项目的目录结构及Webpack配置文件的编写方法。
一、webpack.base.conf.js编辑
module.exports={
//增加页面入口
entry:{
demo:['babel-polyfill','./src/demo/main.js'],
cv:['babel-polyfill','./src/cv/main.js'],
evaluate:['babel-polyfill','./src/evaluate/main.js'],
}
}
二、webpack.dev.conf.js编辑
const devWebpackconfi=merge(baseWebpackConfig,{
...
plugins:[
..
new HtmlWebpackPlugin({
filename:'demo.html',
template:'src/demo/index.html',
inject:true,
chunks:['demo']
}),
new HtmlWebpackPlugin({
filename:'cv.html',
template:'src/cv/index.html',
inject:true,
chunks:['cv']
}),
new HtmlWebpackPlugin({
filename:'evaluate.html',
template:'src/evaluate/index.html',
inject:true,
chunks:['evaluate']
})
]
})
三、目录结构
src文件下
demo文件夹（里面的目录跟单页面的一致性）
ev文件夹（里面的目录跟单页面的一致性）
evaluate文件夹（里面的目录跟单页面的一致性）
xxxx文件夹（以上三个使用的公共文件）
扫一扫
1755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
