Webpack项目中require语句避免使用变量或表达式作为参数

在使用require时，参数切记不能使用变量，否则Webpack打包时会将该参数转换成表达式匹配，而导致会将源目录下同类型文件都打包进一个bundle js文件里。这样当制作相对大型的多页项目时，很容易导致bundle文件大小变得过大，因此解决方法时，单独建立一个类似与Sourcemap的js文件，在该文件中将项目可能出现的所有require文件用switch…case精确匹配。

简单示例

如某项目中de_army.js中有如下代码段（该目录同时保存有上百个记录各类信息的json文件）：

...
var weapon_id = 'tankI';
var json = require(`de_army_${weapon_id}.json`);
console.log(json.message);
...

用Webpack把该js文件作为entry point打包后，结果发现生成的bundle js文件很大，查看内容后发现其中包括了许多该js文件无须用到的多余json文件（即便其实际上只须用到１个json文件）。

改善办法：将以上代码段修改如下：

...
var json = require(`de_army_tankI.json`);
console.log(json.message)
...

以上方法实际就是避免require语句中出现变量和表达式参数。经过修改，重新用Webpack打包后，可以发现此次生成的bundle文件只包含了上例必须的json文件内容，文件大小得到有效缩减。