深入浅出Webpack - (EPUB全文下载)

文件大小：1.42 mb。
文件格式：epub 格式。
书籍内容：

深入浅出Webpack
第1章 入门
第2章 配置
第3章 实战
第4章 优化
第5章 原理
附录A 常用的Loader
附录B 常用的Plugin
附录C Webpack的其他学习资源
反侵权盗版声明
第1章 入门
本章讲解当下最流行的前端构建工具Webpack（https：//webpack.js.org）。
在学习Webpack前，我们需要先知道为什么要用Webpack，本章将通过两个小节进行讲解。
· 1.1前端的发展：介绍近年来Web开发里出现的新技术和前端的发展趋势。
· 1.2常见的构建工具及对比：讲解构建是什么，为什么需要构建，以及对常见构建工具的介绍和对比。
之后，本章以一个简单的项目“Hello，Webpack”为例，让我们一步步掌握Webpack的基础功能。
· 1.3安装与使用：带我们踏入Webpack的大门，将Webpack正常运行起来。
· 1.4使用Loader：使用Webpack的Loader功能加载CSS。
· 1.5使用Plugin：使用Webpack的Plugin功能提取CSS。
· 1.6使用DevServer：使用DevServer提升开发体验。
· 1.7核心概念：通过对以上几节的学习，我们已经掌握了Webpack里基础、核心的功能，本节通过总结来加深我们对Webpack的认识，同时约定一些专有名词为后面的深入学习做准备。
1.1 前端的发展
近年来Web应用变得更加复杂与庞大，Web前端技术的应用范围也更加广泛。从复杂、庞大的管理后台，到对性能要求苛刻的移动网页，再到类似于ReactNative的原生应用开发方案，Web前端工程师在面临更多机遇的同时也面临更大的挑战。通过直接编写JavaScript、CSS、HTML开发Web应用的方式已经无法应对当前Web应用的发展。近年来，前端社区涌现出许多新思想与框架，下面将一一介绍它们。
1.1.1 模块化
模块化是指将一个复杂的系统分解为多个模块以方便编码。
很久以前，开发网页要通过命名空间的方式来组织代码，例如jQuery库将它的API都放在了window.$下，在加载完jQuery后，其他模块再通过window.$去使用jQuery。这样做有很多问题，其中包括：
· 命名空间冲突，两个库可能会使用同一个名称，例如Zepto（http：//zeptojs.com）也被放在window.$下；
· 无法合理地管理项目的依赖和版本；
· 无法方便地控制依赖的加载顺序。
当项目变大时，这种方式将变得难以维护，需要用模块化的思想来组织代码。
1.CommonJS
CommonJS（http：//www.commonjs.org）是一种被广泛使用的 JavaScript 模块化规范，其核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。CommonJS规范的流行得益于Node.js采用了这种方式，后来这种方式被引入到了网页开发中。
采用CommonJS导入及导出的代码如下：
CommonJS的优点在于：
· 代码可复用于Node.js环境下并运行，例如做同构应用；
· 通过Npm发布的很多第三方模块都采用了CommonJS规范。
CommonJS 的缺点在于，这样的代码无法直接运行在浏览器环境下，必须通过工具转换成标准的ES5。
CommonJS还可以细分为CommonJS1和CommonJS2，区别在于CommonJS1只能通过exports.XX=XX的方式导出，而CommonJS2在CommonJS1的基础上加入了module.exports=XX的导出方式。CommonJS通常指CommonJS2。
2.AMD
AMD（https：//en.wikipedia.org/wiki/Asynchronous_module_definition）也是一种JavaScript模块化规范，与CommonJS最大的不同在于，它采用了异步的方式去加载依赖的模块。AMD规范主要用于解决针对浏览器环境的模块化问题，最具代表性的实现是 requirejs（http：//requirejs.org）。
采用AMD导入及导出的代码如下：
AMD的优点在于：
· 可在不转换代码的情况下直接在浏览器中运行；
· 可异步加载依赖；
· 可并行加载多个依赖；
· 代码可运行在浏览器环境和Node.js环境下。
AMD的缺点在于JavaScript运行环境没有原生支持AMD，需要先导入实现了AMD的库后才能正常使用。
3.ES6模块化
ES6模块化是国际标准化组织ECMA提出的JavaScript模块化规范，它在语言层面上实现了模块化。浏览器厂商和 Node.js 都宣布要原生支持该规范。它将逐渐取代 CommonJS 和AMD规范，成为浏览器和服务器通用的模块解决方案。
采用ES6模块化导入及导出的代码如下：
ES6模块虽然是终极模块化方案，但它的缺点在于目前无法直接运行在大部分JavaScript运行环境下，必须通过工具转换成标准的ES5后才能正常运行。
4. 样式文件中的模块化
除了JavaScript开始进行模块化改造，前端开发里的样式文件也支持模块化。以SCSS为例，将一些常用的样式片段放进一个通用的文件里，再在另一个文件里通过@import语句导入和使用这些样式片段：
1.1.2 新框架
在Web应用变得庞大、复杂时，采用直接操作DOM的方式去开发会使代码变得复杂和难以维护，许多新思想被引入到网页开发中以减少开发难度和提升开发效率。
1.React
React（https：//facebook.github.io/react/）框架引入了JSX语法到JavaScript语言层面中，可以更灵活地控制视图的渲染逻辑。
这种语法无法直接在任何现成的JavaScript引擎里运行，必须经过转换。
2.Vue
Vue（https：//vuejs.org）框架将与一个组件相关的HTML模板、Ja ............

以上为书籍内容预览，如需阅读全文内容请下载EPUB源文件，祝您阅读愉快。