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 模块处理的更多相关文章

  1. webpack模块解析

    前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...

  2. webpack模块机制浅析【一】

    webpack模块机制浅析[一] 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制. 下面这段代码是webpack打包后的最基本的形式,可以说是[骨架] (function(roo ...

  3. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  4. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

  5. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

  6. webpack模块依赖管理介绍

    http://webpack.github.io/docs/ webpack is a module bundler. 是一个模块管理器 webpack可以管理模块的依赖关系,并产生可以替代这些模块的 ...

  7. Webpack模块加载器

    一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块 ...

  8. Webpack模块的导出以及之间的依赖引用

    一. 模块化开发模块化开发说白了就不必在html页面,引用所有的js文件.所有的js文件都进行模块化设置,模块之间可以相互引用.Webpack模块化开发是使用module.exports进行相关方法和 ...

  9. webpack 模块方法

    1. webpack的import和export不需要引入babel 其他ES6语法需要引入babel 2. import引入export导出的模块 3. import()模块分离  低版本浏览器想使 ...

随机推荐

  1. 树莓派外网ssh访问holer实现篇

    外网ssh访问树莓派 内网的树莓派(Raspberry Pi),只能在局域网内访问,怎样从公网也能ssh登录访问树莓派? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装并启动树 ...

  2. python 3 字符编码解码问题

    python2与python3 字符编码都做了很大的调整,区别: 1.python2字符串默认有两种类型,unicode和str.'你好' !=u'你好' python3字符串默认只有str一种类型, ...

  3. dos脚本1章

    第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD.这些命令统称批处理命令.小知识:可以在键盘上按下Ctr ...

  4. 设置Linux系统的LANG变量

    设置linux系统的LANG变量 对于国内的Linux用户,经常烦恼的一个问题是:系统常常在需要显示中文的时候却显示成了乱码,而由于某些原因,需要英文界面的系统的时候,却苦于系统不能正常输入和显示中文 ...

  5. 云原生GIS技术

    云原生架构概述 - DockOne.io  http://dockone.io/article/2991 云原生GIS技术全解读 - SuperMap技术控 - CSDN博客  https://blo ...

  6. 往redis中存储数据是利用pipeline方法

    在redis中保存数据时,保存和设置有效时间是分开写的话,如果中间出现的异常,这会导致数据永久有效,因此就可以采用pipeline方法. # 创建redis管道对象,可以一次执行多个语句 pipeli ...

  7. java开发150个建议

    阅读目录 建议1:不要在常量和变量中出现易混淆的字母 建议2:莫让常量蜕变成变量 建议3:三元操作符的类型务必一致 建议4:避免带有变长参数的方法重载 建议5:别让null值和空值威胁到变长方法 建议 ...

  8. 通过for 来获取数组里面的电话

    //存放的是电话号码包含的数字 , , , , , }; //电话号码出现的下标 , , , , , , , , , , }; //方式1 ; i < index.length; i++) { ...

  9. 最详细的 linux grep命令教程

    简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...

  10. Python之简单验证码实现

    def v_code(): ret = '' for i in range(5): num = random.randint(0,9) alf = chr(random.randint(65,122) ...