What is Webpack？
Webpack具有Grunt、Gulp对于静态资源自动化构建的能力，但更重要的是，Webpack弥补了requireJS在模块化方面的缺陷，同时兼容AMD与CMD的模块加载规范，具有更强大的JS模块化的功能。
因此我理解的Webpack，就是一个更出色的前端自动化构建工具、模块化工具、资源管理工具。
webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules.
Why Webpack？
为什么选择Webpack，两点原因。
1、前端需要模块化：JS模块化不仅仅为了提高代码复用性，更是为了让资源文件更合理地进行缓存；
2、AMD与CMD规范日渐衰弱：原因？ES6带来了很强的模块化语法糖。虽然ES6的更多语法糖让JS可能失去了简单的优势，在一些技术社区还偶尔看到一些反ES6的文章，但感觉ES6仍然是未来发展的趋势；
|
1 2 3 4 5 6 7 8 |
module DBLayer { export function query(s) { ... } export function connection(..args) { ... } } import DBLayer.*; module CanvasLib = require('http://../canvas.js'); import CanvasLib.{Triangle, rotate}; |
参考使用简单的JavaScript，我们为什么应该抵制ES6例子。
当然，ES6，我觉得还是未来的事情，尤其是在China地盘要全面普及支持ES6的高级浏览器，真的比证明你妈是你妈还要困难。
所以，我认为，AMD跟CMD慢慢过时的原因，是模块化前端项目的发布打包问题，requireJS跟seaJS都没有一个很好的解决方案。下面配置文件是，我曾经做过的一个backbone的项目以requireJS做模块化加载。项目初始阶段还好，当随着项目深入，模块切分得越细，最后发布上线的时候，页面对于JS的请求数量竟然多达20个以上。大量的HTTPRequest造成的后果，不用多想，大家都知道。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
require.config({ //baseUrl: "scripts/vendor", paths: { underscore: '../vendor/underscore.min', zepto: '../vendor/zepto.min', backbone: '../vendor/backbone.min', domReady: '../vendor/domReady', template: '../vendor/template', iscroll: '../vendor/iscroll/iscroll', common: '../common/common' }, shim: { underscore: { exports: '_' }, zepto: { exports: '$' }, backbone: { deps: ['underscore', 'zepto'], exports: 'Backbone' } }, waitSeconds: 0 }); require([ 'zepto', 'underscore', 'backbone', 'domReady', 'common', '../controller/homeCtrl', '../controller/fadeCtrl', '../controller/mockCtrl' ], function ($, _, backbone, domReady, common, homeCtrl, fadeCtrl, mockCtrl) {...} |
为了解决这个问题，引入的RequireJS的优化方案：r.js Optimizer。详情：前端优化：RequireJS Optimizer 的使用和配置方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
({ name: "ptMain", optimize: "uglify",//uglify `out: "../build/ptMain-build.js",` removeCombined: true, paths: { underscore: '../vendor/underscore.min', zepto: '../vendor/zepto.min', backbone: '../vendor/backbone.min', domReady: '../vendor/domReady', iscroll: '../vendor/iscroll/iscroll.min' }, shim: { underscore: { exports: '_' }, zepto: { exports: '$' }, backbone: { ，就是一个更出色的前端自动化构建工具、模块化工具、资源管理工具。
Why Webpack？为什么选择Webpack，两点原因。 2、AMD与CMD规范日渐衰弱：原因？ES6带来了很强的模块化语法糖。虽然ES6的更多语法糖让JS可能失去了简单的优势，在一些技术社区还偶尔看到一些反ES6的文章，但感觉ES6仍然是未来发展的趋势；
参考使用简单的JavaScript，我们为什么应该抵制ES6例子。 当然，ES6，我觉得还是未来的事情，尤其是在China地盘要全面普及支持ES6的高级浏览器，真的比证明你妈是你妈还要困难。 所以，我认为，AMD跟CMD慢慢过时的原因，是模块化前端项目的发布打包问题，requireJS跟seaJS都没有一个很好的解决方案。下面配置文件是，我曾经做过的一个backbone的项目以requireJS做模块化加载。项目初始阶段还好，当随着项目深入，模块切分得越细，最后发布上线的时候，页面对于JS的请求数量竟然多达20个以上。大量的HTTPRequest造成的后果，不用多想，大家都知道。
为了解决这个问题，引入的RequireJS的优化方案：r.js Optimizer。详情：前端优化：RequireJS Optimizer 的使用和配置方法。
|
