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.jsrequire.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.jsrequire([‘./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 模块处理

原文地址：https://www.cnblogs.com/full-stack-engineer/p/9665540.html