Webpack 模块处理

Posted 2021-01-06 两只小蚂蚁

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