webpack异步加载模块

import()语法的支持

1. 从webpack2.x开始可以识别import()语法: https://webpack.js.org/api/module-methods/#import-
2. 但是加了babel会转换导致会报错，所以要加入babel-plugin-syntax-dynamic-import 或者stage-0的高级preset
3. 服务器端的babel转换得用babel-plugin-dynamic-import-node
4. 然而webpack转换完之后。需要浏览器原生支持Promise(或者直接引入polyfill )，不能transform,这一层Promise没法转换

ps：webpack1.x是用require.ensure的（bundle-loader的目前也用的这个）——官方推荐用import()代替

Input:

    import(
        /* webpackChunkName: "lodash" */
        /* webpackMode: "lazy" */
        'lodash').then((m)=>{ // 这段注释可以起到重命名loadsh的作用，生成lodash.bundle.js,不然就是[id].bundle.js
        console.log('import success');
    });

Output:

 __webpack_require__.e(/*! import() | lodash */ "lodash").then(function() { var module = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js"); return typeof module === "object" && module && module.__esModule ? module : Object.assign({/* fake namespace object */}, typeof module === "object" && module, { "default": module }); }).then((m)=>{ 
        console.log('import success');
    });
    console.log('page1 async import Module');
}

//------------------some runtime code------------------------------
 __webpack_require__.e = function requireEnsure(chunkId) {
    //....some code
    // JSONP chunk loading for javascript
    //.........一些promise处理和installedChunkData的缓存处理
     script.src = __webpack_require__.p + "" + ({"lodash":"lodash"}[chunkId]||chunkId) + ".bundle.js";
     var timeout = setTimeout(function(){
         onScriptComplete({ type: 'timeout', target: script });
     }, 120000);
     script.onerror = script.onload = onScriptComplete;
     function onScriptComplete(event) {
             //...........
    };
    head.appendChild(script);
    //....some code


// __webpack_public_path__
__webpack_require__.p = "/node/assets";

require.ensure 或者 bundle-loader的模式

1. webpack1.x的时候能利用require.ensure进行转化，转换为webpack_require_.e
2. bundle-loader主要会将import转换为require.ensure去进行，然后还可以通过第三个参数重命名webpack包名
3. 但是该模式对commonJs支持性比较好？
4. 目前其实可以直接改用import()方案了,之前react的异步组件方式是配合bundle-loader去用的，现在改为利用react-loadable的方式去异步加载 https://reacttraining.com/react-router/web/guides/code-splitting

require.ensure(['b'], function(require) {
    var c = require('c');

    // Do something special...
  });

webpack2.x的升级说明