「本文正在参与技术专题征文Node.js进阶之路,点击查看详情」
一、 WebpackDevServer 解决单页面应用路由问题
1.1 配置
module.exports = {
//...
devServer: {
historyApiFallback: true,
},
};
等价于
historyApiFallback: {
rewrites: [
{
from: /.*/,
to: 'index.html',
},
],
},
访问任何路径,都转发到index.html
1.2 示例
historyApiFallback 只在开发环境中有效,线上环境需要和后端配合
二、如何进行多页面打包配置?
1)配置多个入口文件
entry:{
main: './src/index.js’,
list: './src/list.js',
detail: './src/list.js'
}
2)借助HtmlwebpackPlugin插件创建对应html
html-webpack-plugin 官方文档:github.com/jantimon/ht…
三、如何动态借助 HtmlwebpackPlugin 插件创建对应html?
会有重读类似的配置出现多次
如图所示,
配置多个entry, 需要new多个htmlWebpackPlugin
配置template, filename, 对应的chunks