使用 vue-cli 开发多页应用改webpack的配置,多入口即可。相当于多个单页面入口,这个时候你需要解决的问题,是如何webApp-A 跳转到 webApp-B 因为两个路由是不共用的---------- 这部分交给 nginx 去解决。
添加一个单页面
假设你现在需要点击一个页面index2.html,对应的入库是main2.js
全局配置
- 修改
webpack.base.conf.js
entry: {
app: './src/main.js',
app2: './src/main2.js',
},
运行、编译的时候每一个入口都会对应一个
Chunk
run dev 开发环境
- 修改
webpack.dev.conf.js
打开 buildwebpack.dev.conf.js
,在plugins
下找到new HtmlWebpackPlugin
,在其后面添加对应的多页,并为每个页面添加Chunk
配置。
chunks: [‘app2′]中的app对应的是webpack.base.conf.js中entry设置的入口文件
plugins:[
// https://github.com/ampedandwired/html-webpack-plugin
// 多页:index.html → app.js
new HtmlWebpackPlugin({
filename: 'index.html',//生成的html
template: 'index.html',//来源html
inject: true,//是否开启注入
chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源
}),
// 多页:index2.html → app2.js
new HtmlWebpackPlugin({
filename: 'index2.html',//生成的html
template: 'index2.html',//来源html
inject: true,//是否开启注入
chunks: ['app2']//需要引入的Chunk,不配置就会引入所有页面的资源
})
]
run build 编译
- 修改
config/index.js
打开config/index.js
,找到build下的index: path.resolve(__dirname, ‘../dist/index.html’),在其后添加多页
build: {
index: path.resolve(__dirname, '../dist/index.html'),
index2: path.resolve(__dirname, '../dist/index2.html'),
},
- 修改
webpack.prod.conf.js
打开buildwebpack.prod.conf.js
,在plugins
下找到new HtmlWebpackPlugin
,在其后面添加对应的多页,并为每个页面添加Chunk
配置
HtmlWebpackPlugin
中的filename
引用的是config/index.js
中对应的build
plugins: [
// 多页:index.html → app.js
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest','vendor','app']//需要引入的Chunk,不配置就会引入所有页面的资源
}),
// 多页:index2.html → app2.js
new HtmlWebpackPlugin({
filename: config.build.index2,
template: 'index2.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest','vendor','app2']//需要引入的Chunk,不配置就会引入所有页面的资源
}),
]
参考链接:
https://segmentfault.com/a/1190000007287998
https://www.zhihu.com/question/41339583/answer/90614536
http://www.tuicool.com/articles/MBF3emR