React + Webpack多入口打包配置（二）PC端、手机端多入口模块化打包配置

多入口打包好处：

1. 可以同时开发PC端、手机端功能。全栈工程师必备。
2. 可以将代码分离成多个独立的bundle, 实现功能插件化，类似支付宝，首页可以显示每个功能的入口，使用时加载对应的模块。

1. 新建页面模板index.ejs, mobile.ejs, 404.ejs, error.ejs

index.ejs

mobile.ejs， 使用蚂蚁金服antd-mobile UI框架。

2. 新建entry.config.js 配置页面入口文件

以后新增页面入口只需要在这个文件中添加即可。

const entryConfig = {
    web: {
        'web/admin': './src/entries/web/admin',
    },
    mobile: {
        'mobile/portal': './src/entries/mobile/portal',
        'mobile/personal': './src/entries/mobile/personal',
    },
}

function allEntry() {
    var entry = {}
    for (var key in entryConfig) {
        entry = Object.assign(entry, entryConfig[key])
    }
    return entry
}

module.exports = {entryConfig, allEntry}

然后就可以使用以下命令完成打包了，先执行build-dll打包公共代码。

npm run build-dll 
npm run build
npm run build-dev
npm run build-dev-server

##完

参考Demo https://github.com/weijizhu1000/personal_manage