Webpack 模块处理

Posted 两只小蚂蚁

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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







以上是关于Webpack 模块处理的主要内容,如果未能解决你的问题,请参考以下文章

webpack总结

webpack入门篇--1.简单介绍

webpack进阶

webpack入门介绍

webpack入门

浅析 -- webpack