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

巴特西

Webpack 模块处理