深入浅出Webpack

深入浅出Webpack

查阅电子书
手机扫码
  • 微信扫一扫

    关注微信公众号

因版权原因待上架

编辑推荐

前端构建工具Webpack开山作,详解Webpack入门、配置、实战、优化、原理及新版特性,前端工程化必备。

内容简介

随着Web开发技术的发展,Webpack凭借其便于使用和涵盖面广的优势,成为目前非常流行的前端构建工具,是每位前端工程师的必备技能之一。

《深入浅出Webpack》对Webpack进行了全面讲解,涵盖了Webpack入门、配置、实战、优化、原理等方面的内容。其中,第1章讲解Webpack入门所涉及的知识;第2章详细讲解Webpack提供的常用配置项;第3章结合实际项目中的常见场景进行实践;第4章给出优化Webpack的优秀方案;第5章剖析了Webpack的原理,并讲解如何开发Plugin和Loader;附录汇总了常见的Loader、Plugin和Webpack的其他学习资源。除了深入讲解Webpack,本书还介绍了ES6、TypeScript、PostCSS、Prepack、离线缓存、单页应用、CDN等Web开发相关的技能。

无论是对 Webpack一无所知的初学者,还是经验丰富的前端工程师,相信都能够通过《深入浅出Webpack》进一步提升对Webpack的理解,并在Web开发中更熟练地运用Webpack。

作者简介

作者吴浩麟,一线前端工程师,曾就职于腾讯,现就职于美团。专注于Web开发,参与过众多大型Web项目的构建、设计和开发,喜欢探索Web前沿技术。也是Golang和音视频技术的爱好者,活跃于GitHub,ID为gwuhaolin。

章节目录

版权信息

内容简介

前言

第1章 入门

1.1 前端的发展

1.1.1 模块化

1.1.2 新框架

1.1.3 新语言

1.2 常见的构建工具及对比

1.2.1 Npm Script

1.2.2 Grunt

1.2.3 Gulp

1.2.4 Fis3

1.2.5 Webpack

1.2.6 Rollup

1.2.7 为什么选择Webpack

1.3 安装Webpack

1.3.1 安装Webpack到本项目

1.3.2 安装Webpack到全局

1.3.3 使用Webpack

1.4 使用Loader

1.5 使用Plugin

1.6 使用DevServer

1.6.1 实时预览

1.6.2 模块热替换

1.6.3 支持Source Map

1.7 核心概念

第2章 配置

2.1 Entry

2.1.1 context

2.1.2 Entry类型

2.1.3 Chunk的名称

2.1.4 配置动态Entry

2.2 Output

2.2.1 filename

2.2.2 chunkFilename

2.2.3 path

2.2.4 publicPath

2.2.5 crossOriginLoading

2.2.6 libraryTarget 和 library

2.2.7 libraryExport

2.3 Module

2.3.1 配置Loader

2.3.2 noParse

2.3.3 parser

2.4 Resolve

2.4.1 alias

2.4.2 mainFields

2.4.3 extensions

2.4.4 modules

2.4.5 descriptionFiles

2.4.6 enforceExtension

2.4.7 enforceModuleExtension

2.5 Plugin

2.6 DevServer

2.6.1 hot

2.6.2 inline

2.6.3 historyApiFallback

2.6.4 contentBase

2.6.5 headers

2.6.6 host

2.6.7 port

2.6.8 allowedHosts

2.6.9 disableHostCheck

2.6.10 https

2.6.11 clientLogLevel

2.6.12 compress

2.6.13 open

2.7 其他配置项

2.7.1 Target

2.7.2 Devtool

2.7.3 Watch和WatchOptions

2.7.4 Externals

2.7.5 ResolveLoader

2.8 整体配置结构

2.9 多种配置类型

2.9.1 导出一个Function

2.9.2 导出一个返回Promise的函数

2.9.3 导出多份配置

2.10 总结

第3章 实战

3.1 使用ES6语言

3.1.1 认识Babel

3.1.2 接入Babel

3.2 使用TypeScript语言

3.2.1 认识TypeScript

3.2.2 减少代码冗余

3.2.3 集成Webpack

3.3 使用Flow检查器

3.3.1 认识Flow

3.3.2 使用Flow

3.3.3 集成Webpack

3.4 使用SCSS语言

3.4.1 认识SCSS

3.4.2 接入Webpack

3.5 使用PostCSS

3.5.1 认识PostCSS

3.5.2 接入Webpack

3.6 使用React框架

3.6.1 React的语法特征

3.6.2 React与Babel

3.6.3 React与TypeScript

3.7 使用Vue框架

3.7.1 认识Vue

3.7.2 接入Webpack

3.7.3 使用TypeScript编写Vue应用

3.8 使用Angular2框架

3.8.1 认识Angular2

3.8.2 接入Webpack

3.9 为单页应用生成HTML

3.9.1 引入问题

3.9.2 解决方案

3.10 管理多个单页应用

3.10.1 引入问题

3.10.2 解决方案

3.11 构建同构应用

3.11.1 认识同构应用

3.11.2 解决方案

3.12 构建Electron应用

3.12.1 认识Electron

3.12.2 接入Webpack

3.13 构建Npm模块

3.13.1 认识Npm

3.13.2 抛出问题

3.13.3 使用Webpack构建Npm模块

3.13.4 发布到Npm

3.14 构建离线应用

3.14.1 认识离线应用

3.14.2 认识Service Workers

3.14.3 接入Webpack

3.14.4 验证结果

3.15 搭配Npm Script

3.15.1 认识Npm Script

3.15.2 Webpack为什么需要Npm Script

3.16 检查代码

3.16.1 代码检查具体是做什么的

3.16.2 怎么做代码检查

3.16.3 结合Webpack检查代码

3.17 通过Node.js API启动Webpack

3.17.1 安装和使用Webpack模块

3.17.2 以监听模式运行

3.18 使用Webpack Dev Middleware

3.18.1 Webpack Dev Middleware支持的配置项

3.18.2 Webpack Dev Middleware与模块热替换

3.19 加载图片

3.19.1 使用file-loader

3.19.2 使用url-loader

3.20 加载SVG

3.20.1 使用raw-loader

3.20.2 使用svg-inline-loader

3.21 加载Source Map

3.21.1 该如何选择

3.21.2 加载现有的Source Map

3.22 实战总结

第4章 优化

4.1 缩小文件的搜索范围

4.1.1 优化Loader配置

4.1.2 优化resolve.modules配置

4.1.3 优化resolve.mainFields配置

4.1.4 优化resolve.alias配置

4.1.5 优化resolve.extensions配置

4.1.6 优化module.noParse配置

4.2 使用DllPlugin

4.2.1 认识DLL

4.2.2 接入Webpack

4.3 使用HappyPack

4.3.1 使用HappyPack

4.3.2 HappyPack的原理

4.4 使用ParallelUglifyPlugin

4.5 使用自动刷新

4.5.1 文件监听

4.5.2 自动刷新浏览器

4.6 开启模块热替换

4.6.1 模块热替换的原理

4.6.2 优化模块热替换

4.7 区分环境

4.7.1 为什么需要区分环境

4.7.2 如何区分环境

4.7.3 结合UglifyJS

4.7.4 第三方库中的环境区分

4.8 压缩代码

4.8.1 压缩JavaScript

4.8.2 压缩ES6

4.8.3 压缩CSS

4.9 CDN加速

4.9.1 什么是CDN

4.9.2 接入CDN

4.9.3 用Webpack实现CDN的接入

4.10 使用Tree Shaking

4.10.1 认识Tree Shaking

4.10.2 接入Tree Shaking

4.11 提取公共代码

4.11.1 为什么需要提取公共代码

4.11.2 如何提取公共代码

4.11.3 如何通过Webpack提取公共代码

4.12 分割代码以按需加载

4.12.1 为什么需要按需加载

4.12.2 如何使用按需加载

4.12.3 用Webpack实现按需加载

4.12.4 按需加载与ReactRouter

4.13 使用Prepack

4.13.1 认识Prepack

4.13.2 接入Webpack

4.14 开启Scope Hoisting

4.14.1 认识Scope Hoisting

4.14.2 使用Scope Hoisting

4.15 输出分析

4.15.1 官方的可视化分析工具

4.15.2 webpack-bundle-analyzer

4.16 优化总结

第5章 原理

5.1 工作原理概括

5.1.1 基本概念

5.1.2 流程概括

5.1.3 流程细节

5.2 输出文件分析

5.3 编写Loader

5.3.1 Loader的职责

5.3.2 Loader基础

5.3.3 Loader进阶

5.3.4 其他Loader API

5.3.5 加载本地Loader

5.3.6 实战

5.4 编写Plugin

5.4.1 Compiler和Compilation

5.4.2 事件流

5.4.3 常用的API

5.4.4 实战

5.5 调试Webpack

5.6 原理总结

附录A 常用的Loader

附录B 常用的Plugin

附录C Webpack的其他学习资源

深入浅出Webpack是2018年由电子工业出版社出版,作者吴浩麟。

得书感谢您对《深入浅出Webpack》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。

购买这本书

你可能喜欢
CSS选择器世界 电子书
CSS选择器是CSS世界的支柱,撑起了整个精彩纷呈的CSS世界。本书专门介绍CSS选择器的相关知识。在本书中,作者结合多年从业经验,在CSS基础知识之上,充分考虑前端开发人员的开发需求,以CSS选择器的基本概念、优先级、命名、最佳实践以及各伪类选择器的概述和适用场景为技术主线,为CSS开发人员介绍有竞争力的知识和技能。此外,本书配有专门的网站,用以进行实例展示和问题答疑。作为一本CSS进阶书,本书
Vue.js前端开发快速入门与专业应用 电子书
摸透Vue.js,无论是桌面端还是移动端,让你从容面对!
Web前端开发精品课  HTML与CSS进阶教程 电子书
  通俗易懂 案例简洁形象,生动剖析晦涩难懂的知识点。   直击要点 规避思维误区,为初学者打牢基础保驾护航。   全面培养 讲透基础知识,亦注重开发技巧与思维锻炼。   精简浓缩 精炼核心内容,为读者节省学习时间与成本。   在线辅助 结合网站资源,强化书本学习并拓展新知识。
微信公众平台与小程序开发——从零搭建整套系统 电子书
适读人群 :web开发开发工程师、后台开发工程师 大专及以上 本书适合零售以及培训班 ·求职利器,Web工程师与后台工程师必修技能。 ·即学即用,系统详尽地呈现高效的开发步骤。 ·自我修炼,从思路到实践,全面提升开发水平。 本书从微信公众平台的基础知识入手,详尽地阐述了开发原理、应用场景,并讲解了公众平台开发相关的关键功能和概念,如微信支付、网页授权账号绑定、JS-SDK、 微信小程序等;微信公众平台开发的主要调试工具及方法的相关内容,可以帮助开发者快速定位问题;搭建基于CodeIgniter的PHP微信公众平台开发框架,是非常实用 的知识,本书在此基础上介绍了多个案例实现;zui后,本书展示了如何在腾讯云平台搭建一套完整的系统,并介绍了服务器运维的相关知识。 微信公众平台开发是当下非常热门的技术之一,涉及前端以及后台技术的工程师需要融汇贯通、熟练掌握。 本书适合具有一定程序开发基础的技术人员阅读。
HTML+CSS+JavaScriptWeb前端开发技术 电子书
本书循序渐进地讲述了三大Web前端开发技术的内容、应用技巧以及它们的综合应用。