webpack怎么动态加载js

Question

动态加载js、css的已有方法就是动态创建标签，请问webpack有没有方法做到需要时才动态发请求加载资源？
（本人是webpack初学者）

Answer 1

这样：

require.ensure(['需要动态加载的module'], function(require) {
    require('需要动态加载的module');
});

参考文档：require.ensure

Answer 2

webpack 4 之后可以直接用

import().then(xx=>{})

甚至可以

async function () {
    await import('')
}

详见webpack官方文档

Answer 3

或者纯粹的AMD形式：
require(['./a','./b'], function(a, b) {

   var c = a + b;

});

webpack会自动产生动态加载代码，结果和ensure产生的是一样的

Answer 4

使用 require.ensure 时可以这样简写：

require.ensure([], function(require) {
    var mod = require('moduleName');
});

动态加载打包好的目录

还可以在需要时才加载某个目录下的文件：

var name = 'moduleName';
var condition = location.hash === '#test'
condition && require.ensure([], function(require) {
    var mod = require('dirName/' + name);
});

webpack 生成结果

build.js

function(module, exports, __webpack_require__) {
    console.log('this is from build.js');
    var name = 'aaa';
    var condition = location.hash === '#test';
    if (condition) {
      __webpack_require__.e/* nsure */(1, function (require) {
        var b = __webpack_require__(2)("./" + name + '.js');
        console.log(b);
      });
    }
}

1.build.js

webpackJsonp([1],[
/* 0 */,
/* 1 */,
/* 2 */
/***/ function(module, exports, __webpack_require__) {

    var map = {
        "./aaa.js": 3,
        "./bbb.js": 4,
        "./ccc.js": 5
    };
    function webpackContext(req) {
        return __webpack_require__(webpackContextResolve(req));
    };
    function webpackContextResolve(req) {
        return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
    };
    webpackContext.keys = function webpackContextKeys() {
        return Object.keys(map);
    };
    webpackContext.resolve = webpackContextResolve;
    module.exports = webpackContext;
    webpackContext.id = 2;


/***/ },
/* 3 */
/***/ function(module, exports) {

        module.exports = 'this is from dirName/aaa.js.'

/***/ },
/* 4 */
/***/ function(module, exports) {

    

/***/ },
/* 5 */
/***/ function(module, exports) {

    

/***/ }
]);