react+webpack4.x搭建前端项目（五）多页面配置

前言

我们接着上一篇文章react+webpack4.x搭建前端项目之配置抽取和区分环境来进行多页面打包的配置

首先修改src下的代码，项目的结构目录

QQ截图20191213143525.png

源码见修改src下代码，添加测试a,b模块完整代码0.0.2

开发环境多页面的配置

新建build/module-entry.js，获取额外打包的模块名，和入口entry配置

const glob = require("glob")

// 获取各个模块名称
function getModuleList(){
    const moduleList = glob.sync("././src/modules/*");
    for(let index = 0 ; index < moduleList.length ; index++){
        const item = moduleList[index];
        const tmpList = item.split("/");
        moduleList[index] = tmpList[tmpList.length-1];
    }
    return moduleList;
}

// 获取webpack entry
function getBuildEntry(){
    const moduleList = getModuleList();
    let entry = {};
    for(let index in moduleList){
        const moduleName = moduleList[index]
        entry[moduleName] = "./src/modules/" + moduleName + "/index.js"
    }
    // 额外添加./src/index的配置(把这个也当做一个页面)
    entry["app"] = "./src/index.js"
    return entry
}
module.exports = {
    getModuleList,
    getBuildEntry,
};

然后我们修改webpack.dev.config.js

组装htmlwebpackplugin多页面模板和输出模板

const { getModuleList , getBuildEntry} = require("./module-entry")

// 获取各个模块
const moduleList = getModuleList();

const HtmlWebpackPluginList = [];
for(let index in moduleList){
    const moduleName = moduleList[index]
    HtmlWebpackPluginList.push(new HtmlWebpackPlugin({
        filename: utils.resolve('./../dist/'+ moduleName+ '/index.html'), // html模板的生成路径
        template: utils.resolve("./../src/modules/" + moduleName + "/index.html"),//html模板
        inject: true, // true：默认值，script标签位于html文件的 body 底部
        chunks: [moduleName],  // 注入哪个名称bundel
    }))
}

最后把HtmlWebpackPluginList放入plugins属性下，在plugins数组最后加如下代码

.concat(HtmlWebpackPluginList)

修改entry属性

entry: getBuildEntry(),

执行npm run dev
浏览器打开http://localhost:8081，结果如下图

QQ截图20191213161552.png

发现怎么是b页面的内容？

那么是为什么呢？经过排查，打开控制台选择elements看到如下图

QQ截图20191213161753.png

index.html注入了所有bundle。a，b模块（页面）的bundle也注入到html页面中，b模块的bundle在最后边，把前边的覆盖了。这就是问题的根源。

这时候我们需要修改webapck.dev.config.js默认HtmlWebpackPlugin的实例的参数，新增chunks: ['app']

new HtmlWebpackPlugin({
    filename: utils.resolve('./../dist/index.html'), // html模板的生成路径
    template: 'index.html',//html模板
    chunks: ['app'], // 至注入app和app相关的bundle
    inject: true, // true：默认值，script标签位于html文件的 body 底部
}),

这时候重新运行成功解决！

QQ截图20191213162054.png

然后我们打开http://localhost:8081/a，http://localhost:8081/b页面正常显示。

QQ截图20191213162633.png QQ截图20191213162649.png

但是存在一个问题！点击二级路由的时候也可以正常显示，但是我们直接打开或者刷新二级路由的时候(http://localhost:8081/a/test)时候发现页面显示成http://localhost:8081这个页面了

因为这里我们设置的webpack-dev-server的historyApiFallback是true，那么它就把所有的地址全部重定向到根目录的index.html，也就会重定向到http://localhost:8081打开的页面了，然后在这下边寻找路由进行匹配

怎么解决呢？

historyApiFallback提供的有一个rewrites属性，可以使用如rewrites选项进一步控制此行为

详细使用请看官方文档

我们这里需要构建rewrites内容

// 需要在开发环境重写的规则数组
const rewrites = [];  // webpack-dev-server的historyApiFallback中使用
for(let index in moduleList){
    const moduleName = moduleList[index]
    // 以模块名开头的路径，重定向到 改模块下的index.html模板文件 比如路径一以/a开头，会重定向到a模块下的index.html 
    rewrites.push({
        from:new RegExp('^\/' + moduleName), 
        to:utils.resolve('/' + moduleName +'/index.html')
    })
}

最后修改historyApiFallback

historyApiFallback: {
    rewrites: rewrites
},

重新运行npm run dev，再次刷新http://localhost:8081/a/test，页面显示正常。那么开发环境的多页面配置已经完成喽

打包环境多页面的配置

和上边的配置差不多，修改webapck.prod.config.js，只是对于打包环境添加了压缩代码的配置项

const { getModuleList , getBuildEntry} = require("./module-entry")

// 获取各个模块
const moduleList = getModuleList();

const HtmlWebpackPluginList = [];
for(let index in moduleList){
    const moduleName = moduleList[index]
    HtmlWebpackPluginList.push(new HtmlWebpackPlugin({
        filename: utils.resolve('./../dist/'+ moduleName+ '/index.html'), // html模板的生成路径
        template: utils.resolve("./../src/modules/" + moduleName + "/index.html"),//html模板
        inject: true, // true：默认值，script标签位于html文件的 body 底部
        //  html 文件进行压缩
        chunks: [moduleName,'vendors'],  // 必须指定，不然会把多有打包的东西插入html模板当中
        minify: {
            removeComments: true,               //去注释
            collapseWhitespace: true,           //压缩空格
            removeAttributeQuotes: true         //去除属性引用
        },
    }))
}

最后把HtmlWebpackPluginList放入plugins属性下，在plugins属相后加如下代码

.concat(HtmlWebpackPluginList)

我们还需要修改webapck.prod.config.js默认HtmlWebpackPlugin的实例的参数，新增chunks: ['app']

new HtmlWebpackPlugin({
    filename: utils.resolve('./../dist/index.html'), // html模板的生成路径
    template: 'index.html',//html模板
    inject: true, // true：默认值，script标签位于html文件的 body 底部
    chunks: ['app'],  // 注入app名称bundel
    minify: {
        removeComments: true,               //去注释
        collapseWhitespace: true,           //压缩空格
        removeAttributeQuotes: true         //去除属性引用
    }
}),

执行npm run build测试打包结果，dist目录如下：

QQ截图20191213171322.png

通过webpack-bundle-analyzer分析webpack的拆包和bundle包之间的依赖关系

QQ截图20191213171520.png

得出结论：
这种多页面打包方式，在整个项目的基础上打包，webpack会对这些页面的引用的第三方模块进行拆包，导致不同的页面存在相同的bundle包，也就是不同页面存在共用的bundle包。这样的好处是可以减小打包的总体积

抽取HtmlWebpackPluginList

在module-entry.js添加工具方法如下

const HtmlWebpackPlugin = require("html-webpack-plugin")
const utils = require("./utils")

// 获取htmlwebpackplugin列表
function getHtmlWebpackPluginList(options={}){
    const moduleList = getModuleList();
    const HtmlWebpackPluginList = [];
    for(let index in moduleList){
        const moduleName = moduleList[index];
        const HtmlWebpackPluginOptions = {
            filename: utils.resolve('./../dist/'+ moduleName+ '/index.html'), // html模板的生成路径
            template: utils.resolve("./../src/modules/" + moduleName + "/index.html"),//html模板
            inject: true, // true：默认值，script标签位于html文件的 body 底部
            chunks: [moduleName],  // 注入哪个名称bundel
        };
        if(options.extract){
            HtmlWebpackPluginOptions = Object.assign(HtmlWebpackPluginOptions,{
                minify: {
                    removeComments: true,               //去注释
                    collapseWhitespace: true,           //压缩空格
                    removeAttributeQuotes: true         //去除属性引用
                },
            })
        }
        HtmlWebpackPluginList.push(new HtmlWebpackPlugin(HtmlWebpackPluginOptions))
    }
    return HtmlWebpackPluginList;
}

导出该方法。然后在webpack.dev.config.js以及webpack.prod.config.js中导入getHtmlWebpackPluginList方法，

const { getModuleList , getBuildEntry,getHtmlWebpackPluginList } = require("./module-entry")

最后.concat(HtmlWebpackPluginList)替换成.concat(getHtmlWebpackPluginList())

然后在把rewrites数组提取，在module-entry.js添加工具方法如下：

// 获取开发环境重定向的规则，只在开发环境中使用
function getRewritesList(){
    // 获取各个模块
    const moduleList = getModuleList();

    // 需要在开发环境重写的规则数组
    const rewrites = [];  // webpack-dev-server的historyApiFallback中使用
    for(let index in moduleList){
        const moduleName = moduleList[index]
        // 以模块名开头的路径，重定向到 改模块下的index.html模板文件 比如路径一以/a开头，会重定向到a模块下的index.html 
        rewrites.push({
            from:new RegExp('^\/' + moduleName), 
            to:utils.resolve('/' + moduleName +'/index.html')
        })
    }
    return rewrites;
}

导出该方法，然后为webpack.dev.config.js文件导入getRewritesList方法
···
const { getModuleList , getBuildEntry,getHtmlWebpackPluginList, getRewritesList} = require("./module-entry")
···
把historyApiFallback: {rewrites: rewrites}修改成 historyApiFallback: {rewrites: getRewritesList()}

执行npm run build测试打包结果，一切正常！

源码：react+webpack4.x多页面 release-tag-0.0.3

下一篇：react+webpack4.x多模块打包配置