webpack require.ensure 分割打包手动控制打包文件

[mishe]

• 要分割打包，首先要设置webpack的output，增加chunkFilename: "[name].js"的配置,比如：

{
   entry: {
        "index": "src/home.js"
    },
    output: {
        filename: "bundle.js",
        chunkFilename: "[name].js"
    }
}

require.ensure([]) 引用模块，其使用方法如下：

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

• require.ensure() API有三个参数，一般文档都只介绍2个入参，
• 这样做，会有两个不是很符合意愿的结果：
• 1. webpack会给每个require.ensure生产一个chunk file;
• 2. [name] 是一个自动分配的、可读性很差的id。
• 而第三个参数就是给模块命名的，并且可以把多个ensure合并到一个chunk中

采用require.ensure加载模块并给打包模块命名，代码如下：

require.ensure(['./mall/orders/orderInfo/orderInfo'],function(require){
            var OrderInfo = require('./mall/orders/orderInfo/orderInfo');
            new OrderInfo({el:fresh.$content,oid:oid});
        },'mall');
require.ensure(['./mall/orders/orderInfo/orderInfo'],function(require){
            var OrderInfo = require('./mall/orders/orderInfo/orderInfo');
            new OrderInfo({el:fresh.$content,oid:oid});
        },'mall');

这边把2个和mall相关的代码全部打包到mall.js 文件

[mishe]

参考：https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly