wepack英文文档阅读笔记--简介与模块系统
来源:互联网 发布:.net core 2.0 知乎 编辑:程序博客网 时间:2024/05/29 01:54
优势
插件(Plugins)
webpack中有丰富的插件,你可以找到你需要的插件,并且它又是那么的易用。
表现(Performance)
webpack采用异步IO和多个缓存层次使得增量编译的速度快的让人难以置信。
加载器(Loaders)
对于加载器带给我们太多的便利,举几个栗子吧: (1) 为我们的CSS添加前缀。 (2) 将小于8KB的图片base64 (3) 使用less预处理器 (4) 等等。。
支持(Support)
webpack支持AMD和CommonJS规范,支持大部分的其他库.
按需加载(Code Splitting)
我们将第三方js文件放入chunks,而chunks中是按需加载的,这能大大的减少我们的加载时间。
优化(Optimizations)
webpack可以优化我们输出的JS文件的大小,同时也可以通过hashes静态文件缓存问题。
调试工具(Development Tool)
webpack支持SourceUrls和SourceMaps, 你也可以用 development server 来实现自动刷新。
不仅仅是web
webpack的服务不仅仅局限于web,WebWorkers和NodeJS同样可以使用。
webpack的出现
现在的前端开发多强调前后端分离,所以大部分需要写的代码回归到了我们前端的手中(是不是很爽),所以我们需要组织我们的代码,需要有一个模块体系: (1) 最初的script标签 (2) CommonJS规范 (3) AMD规范 (4) ES6 Module
script标签
我们一般多是使用script标签引入JS库,而这种方式带来的问题:
* 全局变量的冲突
* 依赖的管理
* 对于大量文件的导入,很不适合书写。
CommonJS规范
CommonJS规范主要引用于NodeJS:
* 它的出现使得服务器上很多模块得以重用
* npm给我们带来了巨大的便利。
* 因为CommonJS主要用于服务器端,所以采用的是同步加载,并不适合浏览器端。
//Math.js: let Math = { add (a, b) { return a + b; } } module.exports = Math; //b.js var Math = require('./math'); let result = Math.add(1, 2); console.log(result); // 3
AMD规范
于是推出了一个异步加载的模块规范AMD.实现AMD主流的库require.js.
<h2 id="demo">首页</h2> <script src="http://cdn.bootcss.com/require.js/2.3.2/require.min.js" data-main="js/main"></script>
//js文件夹下的math.js define(function () { var math = {}; math.add = function (a, b) { return a + b; } return math; });
//js文件夹下的main.js require.config({ paths: { jquery: 'http://cdn.bootcss.com/jquery/3.1.1/jquery.min', //不能加js后缀名。 math: 'math' } }); require(['jquery','math'], function ($, math) { var result = math.add(10, 2006); $('#demo').html('hello ' + result + ' !'); });
ES6 Module(ES6中的模块)
这个感觉跟CommonJS有点像,与CommonJS不同的是,它只是获取模块的引用,到真正使用的时候才会去取值。
例如student.js中: let student = [ { name: 'xiaoming', age: 21, }, { name: 'xiaohong', age: 18 } ] export default student; // 这种导出方式,你可以在import时指定它的名称。 在app.js中我们就可以这样用: import StudentList from './student.js'; //指定名称 console.log(StudentList[0].name); //xiaoming
0 0
- wepack英文文档阅读笔记--简介与模块系统
- webpack英文文档阅读笔记--chunks
- 英文文档的阅读
- 阅读Logback文档笔记--Logback简介
- webpack英文文档阅读笔记--ES6环境配置
- HtmlPaser英文文档与Http英文文档
- 阅读英文文档遇到的生词
- webpack英文文档阅读--图片的处理
- Resin文档阅读笔记
- Instruments文档阅读笔记
- Instruments文档阅读笔记
- scala文档阅读笔记
- 非典型2D游戏引擎 Orx 源码阅读笔记(2) 基础模块与模块管理模块
- mysql官方文档阅读笔记(三)General Information一般信息模块浏览
- maven官方文档阅读笔记
- media query 文档阅读笔记
- 阅读开发文档activity----笔记
- Yii2 官方文档阅读笔记
- 2016.12.14重学C语言记录篇--2
- Unity性能优化之CPU篇
- 数据持久化__归档
- docker初使用小结
- Linux中logrotate的使用
- wepack英文文档阅读笔记--简介与模块系统
- socket TCP编程中connect的一些坑 .
- JDK环境变量以及tomcat配置,maven配置
- 虚拟器安装过程
- PHP ajax访问服务器 $_SESSION数据丢失解决方案
- Object.defineproperty实现数据和视图的联动
- maven常见问题
- 冒泡排序
- Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'