webpack 之 单页面、多页面打包配置篇

722 阅读1分钟

「本文正在参与技术专题征文Node.js进阶之路,点击查看详情

一、 WebpackDevServer 解决单页面应用路由问题

webpack.js.org/configurati…

1.1 配置

module.exports = {
 //...
 devServer: {
   historyApiFallback: true,
 },
};

等价于

historyApiFallback: {
    rewrites: [
        { 
            from: /.*/,
            to'index.html',
        },
    ],
},

访问任何路径,都转发到index.html

1.2 示例

image.png

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…

image.png

三、如何动态借助 HtmlwebpackPlugin 插件创建对应html?

会有重读类似的配置出现多次

如图所示, image.png

配置多个entry, 需要new多个htmlWebpackPlugin

配置template, filename, 对应的chunks

我们可以使用Node封装一个函数来实现

image.png