Webpack - CommonJs & AMD 模块打包器

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化 什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码 这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<

Webpack: 为Web开发而生的模块管理器 原文地址:http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/ 10 Sep 2014 对于开发人员而言,好的包管理器可以让工作事半功倍.现在流行的编程语言大多有自己的包管理系统.近年来,Web开发越来越火,其开发工具也随之越来越好用了,而Webpack就是一款专为Web开发设计的包管理器.它能够很好地管理.打包Web开发中所用到的HTML.Javascript.CSS以

关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.

之前翻译过一篇文章,介绍了通过 ES2015 的解构赋值语法引入模块,可以让打包工具(browserify)最终编译出来的代码量最小化. 殊不知在 webpack 1.X 版本是无法利用该特性来避免引入冗余模块代码的,导致打出来的 bundle 文件大小难免略有臃肿. 今天则向大家介绍一个当红炸子鸡——Rollup.js,通过它可以让你的 bundle 最小化,有效减少文件请求大小——以至于连 vue 都迅速地转投它来打包模块. Tree-shaking 在 Rollup 编译模块的过程中,通过

多模块依赖 刚才的例子,我们仅仅是跑通了webpack通过entry.js入口文件进行打包的例子.下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢?下面我们新建多几个js文件吧! // 修改module1.js require(["./module3"], function(){ console.log("Hello Webpack!"); }); 下一个文件 // module2.js,使用的是CommonJs机制导出包 module.exp

在webpack中支持的模块语法风格有:ES6,commonJS和AMD ES6风格(推荐) 在webpack2中,webpack支持ES6模块语法.这意味着在没有babel等工具处理的情况下你就可以使用import和export.下面的方法在webpack中被支持: import 静态地导入其他模块的导出 import MyModule from './my-module.js'; import { NamedExport } from './other-module.js'; 注:impor

webpack基本概念 1. webpack中的module,chunk 和 bundle module 就是一个js模块,就是被require或export的模块,例如 ES模块,commonjs模块,AMD模块chunk 是 代码块,是进行依赖分析的时候,代码分割出来的代码块,包括一个或多个module,是被分组了的module集合,code spliting之后的就是chunkbundle 是 文件,最终打包出来的文件,通常一个bundle对应一个chunk 2. webpack中load

模块化结构已经成为网站开发的主流. 制作网站的主要工作,不再是自己编写各种功能,而是如何将各种不同的模块组合在一起. 浏览器本身并不提供模块管理的机制,为了调用各个模块,有时不得不在网页中,加入一大堆script标签.这样就使得网页体积臃肿,难以维护,还产生大量的HTTP请求,拖慢显示速度,影响用户体验. 为了解决这个问题,前端的模块管理器(package management)应运而生.它可以轻松管理各种JavaScript脚本的依赖关系,自动加载各个模块,使得网页结构清晰合理.不夸张地说,将

模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果想要对外提供接口的话,可以将接口绑定到 exports (即 module.exports) 上. function MyModule() { // ... } if(typeof module !== `undefined` && typeof exports === `object`) {