webpack构建网页，解决一套代码多客户不同的个性化需求的思路&关键代码，可能造了个轮子吧

本文只有关键代码和思路

 

webpack ^v4.x

nodejs   我觉得这个版本关系不大，只要能安装webpack4就OK了

 

思路

======================================

创建一个配置文件的文件夹，比如ppc（personzlization, personalized,customized  个性化的翻译哈）

里面创建默认配置文件，和做了个性化的客户的配置文件，我是以ppc-[客户拼音].json命名

在package.json注册脚本，比如构建命令是 “npm run build”，在注册多一个用于对应这个客户的比如“npm run build-beijing”

利用webpack4的参数特性传入参数至webpack.config.js

webpack.config根据传入的参数，读取对应的配置文件，做个性化的处理

（到这里还只是构建环节）

利用插件“webpack.DefinePlugin”传入参数至浏览器运行的js中

 

关键代码

======================================

1. node传入变量至webpack.config.js

在package.json注册客户独有的build脚本，大致代码如下：

webpack --config ./build/webpack.config.js --mode production --ppc beijing

解读一下，--ppc  是定义一个ppc这个变量，空格后面的是值

 

2.webpack.config.js接收变量

module.exports = (env, argv) => {
  const isDev = argv.mode === 'development';

  var cnf = cnf_tool.getCnf(argv.ppc);
}

argv.ppc的值就是 “beijing”

cnf_tool是我自己写的一个模块，里面的代码大致就是读取客户的配置文件的配置覆盖默认配置合并产生一份完整配置

 

3. cnf_tool 文件

const extend = require('extend');
const fs = require('fs');
const path = require('path');


const default_cnf = {
    //index.html的title
    document_index_title: '那个客户非要把这里修改掉',
    //运行时配置
    runtime:{
        ceshi:11111111
    }
}

exports.getCnf = (key) => {
    var key_cnf={};
    if (key) {
        var file = fs.readFileSync(path.join(__dirname, './ppc-'+key+'.json')).toString();
        key_cnf=JSON.parse(file);
    } 
    return extend(true, default_cnf, key_cnf);
}

 

4. webpack.config.js 利用配置做个性化处理，并且将运行时配置代入到js中

//plugins 节点下面

//这个是让运行时能够得到配置数据
new webpack.DefinePlugin({
    runtime_ppc: cnf.runtime
}),


//个性化案例，修改title
new HtmlwebpackPlugin({
    //此处省略N行代码
    title: cnf.document_index_title,
}),

修改title方式很多，可以通过ajax请求后台的数据，这里只是举个栗子，大家可以在自己的应用场景举一反三的

我没有告诉你这里设置title之后，build完之后就会显示你配置的title哦，详情请看5

 

5. 模板index.html

<title>
    <%= htmlWebpackPlugin.options.title %>
</title>
 

（以上部分是build层的个性化，下面来运行时的，我运行时还没有做具体的实现，只是有一个接口，你们自己知道的，当然也可以通过ajax去实现）

 

6. 运行时获取配置，注意第4步的传入，不传肯定没有的啊

//用vue为例
Vue.prototype.ppc=runtime_ppc;
 

别问我runtime_ppc哪里来的，Ctrl+F找一下就知道了

 

思考

======================================

到这里还一块我还没有做过测试，可能还有点点坑吧

就是比较大的个性化，比如欢迎页，可能不同的客户要的数据完全不一样

（我的是vue）

这个时候可能需要不同的客户直接写不一样的Welcome.vue文件，然后主页面调用不同的模块

那么问题来了，这个是动态引用的资源，是不是感觉到时候会import不到模块对吧

或者说我就在此之前把所有客户的Welcome.vue全部import一下

那么问题又来了，build完之后发现，他把其他客户的Welcome.vue代码也打包进去了