Webpack 模塊處理

webpack模塊處理

1. ES6 靜態Import

ES6的import會被轉化爲commonjs格式或者是AMD格式,babel默認會把ES6的模塊轉化爲commonjs規範的。

import list from './list';
//等價於
var list = require('./list');

兩種寫法只需選一種，避免在代碼中同時使用形成混淆。

2. ES6 動態Import

語法：Import.then Promise回調
動態的加載模塊，import調用點會被解析爲模塊分割入口點，生成單獨chunk。

import('lodash').then(_ => {
  // Do something with lodash (a.k.a '_')...
});

3. CommonJS同步

var $ = require('jquery');
var myModule = require('my-module');
var a = require('./a');
//此時webpack會將a.js打包進引用它的文件中,這是最廣泛的情形。

• require.resolve
  同步模塊抽取，編譯器會保證依賴被打包到輸出bundle。

4. CommonJS異步

語法：require.ensure
注：require.ensure() 被webpack包裝爲import() Promise.
webpack 在編譯時，會靜態地解析代碼中的 require.ensure()，同時將模塊添加到一個分開的 chunk 當中。這個新的 chunk 會被 webpack 經過 jsonp 來按需加載。

require.ensure([], function(require){
    var list = require('./list');
    list.show();
});
//打包輸出：1.XXXX.js
//
require.ensure([], function(require){
    var list = require('./list');
    list.show();
}, 'list');
//打包輸出： list.XXX.js

require.ensure([], function(require){
    var list = require('./list');
    list.show();
    var edit = require('./edit');
    edit.display();
}, 'list_and_edit');
//打包輸出： list_and_edit.XXX.js

4. AMD

webpack既支持commonjs規範也支持AMD規範，這就意味着AMD的經典語法是能夠正常使用的，如：

require(['./list'], function(list){
    list.show();
});
//打包輸出：1.XXX.js

require(['./list', './edit'], function(list, edit){
    list.show();
    edit.display();
});
//不支持自定義文件名

//同require.ensure, 給定的依賴b會被打包爲單獨bundlle並在須要時可進行異步加載.
require(['b'], function(b) {
  var c = require('c');
});

refs:
https://webpack.js.org/api/module-methods/#import
https://blog.csdn.net/huang100qi/article/details/78060086