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模块解析
前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...
- webpack模块机制浅析【一】
webpack模块机制浅析[一] 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制. 下面这段代码是webpack打包后的最基本的形式,可以说是[骨架] (function(roo ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- webpack模块加载css文件及图片地址
webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...
- webpack模块依赖管理介绍
http://webpack.github.io/docs/ webpack is a module bundler. 是一个模块管理器 webpack可以管理模块的依赖关系,并产生可以替代这些模块的 ...
- Webpack模块加载器
一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块 ...
- Webpack模块的导出以及之间的依赖引用
一. 模块化开发模块化开发说白了就不必在html页面,引用所有的js文件.所有的js文件都进行模块化设置,模块之间可以相互引用.Webpack模块化开发是使用module.exports进行相关方法和 ...
- webpack 模块方法
1. webpack的import和export不需要引入babel 其他ES6语法需要引入babel 2. import引入export导出的模块 3. import()模块分离 低版本浏览器想使 ...
随机推荐
- QT 定时器详解
编译器 : Qt Creator 在窗口化类中实现定时器 .h #include <QTimer> private slots: ... void onTimerOut(); priv ...
- 2017年5月11日17:43:06 rabbitmq 消费者队列
从昨天开始发现个问题,一个接口在本地调用时大部分正常,一旦在生成者打一个断点调试,并且在promotion也打断点的时候会出现没有返回channel的异常,然后消费者就再也消费不了了 16:57:45 ...
- Firefox下载附件乱码的解决办法
通过在http的header里设置fileName下载附件时,中文文件名通过chrome浏览器下载时正常,通过firefox下载时为乱码: 原来的Java代码: response.addHeader( ...
- oracle数据库查询和更新
package sqltest; import java.sql.*; import parameter.BaseCanShu; public class PublicDbOracle { stati ...
- docker查看挂载目录Volume
使用docker inspect命令查看container的volume信息,按照书本上面敲,发现一直报错: 使用命令如下: sudo docker inspect --format "{{ ...
- python day33 ,socketserver多线程传输,ftp作业
一.一个服务端连多个客户端的方法 1.服务端 import socketserver class MyServer(socketserver.BaseRequestHandler): def hand ...
- 使用axios获取本地json数据
1. 通过搜索 网上说不放在static文件夹中会报错 但是一直报错 放到根目录下的时候不报错了 2. 在main.js中引入axios import axios from 'axios' 3. ...
- for语句,range() 函式
for 语句在任意序列 (列表或者字符串) 中迭代时, 总是按照元素在序列中的出现顺序依次迭代. 2 ... a = ['cat', 'window', 'defenestrate']3 >&g ...
- 事务的ACID特性(转)
ACID特性 数据库中的事务(Transaction)有四个特性,分别是:原子性(Atomicity),一致性(Consistency),隔离性(lsolation),持久性(Durability) ...
- Mysql数据库账户权限设置
1.修改mysql数据库的root密码: 修改 数据库.表名 SET password=加密(‘密码’) where user=’root’; UPDATE mysql.user SET passwo ...