Webpack+Babel入门与实例详解

Webpack+Babel入门与实例详解

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

    关注微信公众号

因版权原因待上架

编辑推荐

一本针对零基础前端开发者讲解Webpack与Babel使用方法的图书。

内容简介

随着前端工程的不断发展,Webpack与Babel已成为前端开发的两大核心工具。目前,Webpack是前端开发的主流构建工具,Babel是转译ES6代码的通用解决方案。

本书由两大部分构成,第一部分介绍Webpack,第二部分介绍Babel。

Webpack部分讲解了Webpack的安装、资源入口与出口、预处理器与插件的配置、开发环境与生产环境的配置、性能优化及构建原理等;Babel部分讲解了Babel入门知识、Babel的配置文件、预设与插件的选择、babel-polyfill的使用方法,以及@babel/preset-env和@babel/plugin-transform-runtime这两个核心配置项的使用方法,这一部分还会讲解Babel的原理及Babel插件的开发;最后,在附录中介绍了ModuleFederation与微前端,以及Babel8前瞻等内容。

本书主要使用的Webpack版本是v5.21.2,但对v5.0.0之后的版本都适用;主要使用的Babel版本是v7.13.10,但对v7.0.0之后的版本都适用。

作者简介

作者姜瑞涛,毕业于华北电力大学,五年前端开发经验。曾在好未来、用友担任高级前端开发工程师,参与过用友NC Cloud大型企业数字化平台和学而思网校1对1管理后台的开发。

擅长工程化解决前端兼容性问题,在Babel的使用上有丰富经验。

章节目录

版权信息

内容简介

前言

第1章 Webpack入门

1.1 Webpack简介

1.2 安装Webpack 5

1.2.1 安装Node.js

1.2.2 安装Webpack

1.2.3 全局安装与本地安装Webpack的区别

1.3 Webpack快速入门

1.3.1 Webpack的命令行打包

1.3.2 Webpack打包模式mode

1.3.3 Webpack的配置文件

1.4 Webpack预处理器

1.4.1 引入CSS文件

1.4.2 Webpack预处理器的使用

1.5 本章小结

第2章 Webpack资源入口与出口

2.1 模块化

2.1.1 JS模块化历史

2.1.2 ES6 Module

2.1.3 CommonJS

2.2 Webpack资源入口

2.2.1 Webpack基础目录context

2.2.2 Webpack资源入口entry

2.3 Webpack资源出口

2.3.1 Webpack的output.filename

2.3.2 Webpack的output.path

2.3.3 Webpack的output.publicPath

2.3.4 output.publicPath与资源访问路径

2.3.5 Webpack的output.chunkFilename

2.4 hash、fullhash、chunkhash和contenthash的区别

2.4.1 浏览器缓存

2.4.2 Webpack与hash算法

2.4.3 Webpack中hash、fullhash、chunkhash和contenthash的区别

2.5 本章小结

第3章 Webpack预处理器

3.1 预处理器的配置与使用

3.1.1 预处理器的关键配置项

3.1.2 exclude和include

3.1.3 其他预处理器写法

3.2 Babel预处理器babel-loader

3.2.1 引入问题

3.2.2 直接使用Webpack

3.2.3 使用babel-loader

3.3 文件资源预处理器file-loader

3.3.1 file-loader处理JS引入的图片

3.3.2 file-loader处理CSS引入的图片

3.3.3 file-loader的其他知识

3.4 增强版文件资源预处理器url-loader

3.4.1 url-loader的Base64编码

3.4.2 file-loader与url-loader处理后的资源名称

3.4.3 file-loader与url-loader处理后的资源路径

3.5 本章小结

第4章 Webpack插件

4.1 揑件简介

4.2 清除文件揑件clean-webpack-plugin

4.2.1 clean-webpack-plugin简介

4.2.2 安装clean-webpack-plugin

4.2.3 使用clean-webpack-plugin

4.3 复制文件揑件copy-webpack-plugin

4.3.1 copy-webpack-plugin简介

4.3.2 安装copy-webpack-plugin

4.3.3 使用copy-webpack-plugin

4.4 HTML模板揑件html-webpack-plugin

4.4.1 html-webpack-plugin简介

4.4.2 安装html-webpack-plugin

4.4.3 使用html-webpack-plugin

4.4.4 html-webpack-plugin的自定义参数

4.5 本章小结

第5章 Webpack开发环境配置

5.1 文件监听与webpack-dev-schmerver

5.1.1 文件监听模式

5.1.2 webpack-dev-schmerver的安装与启动

5.1.3 webpack-dev-schmerver的常用参数

5.2 模块热替换

5.3 Webpack中的source map

5.3.1 source map简介

5.3.2 source map的配置项devtool

5.3.3 开发环境与生产环境source map配置

5.4 Asset Modules

5.4.1 Asset Modules简介

5.4.2 自定义文件名称

5.4.3 资源类型为asset/inline

5.4.4 资源类型为asset

5.5 本章小结

第6章 Webpack生产环境配置

6.1 环境变量

6.1.1 Node.js环境里的环境变量

6.1.2 Webpack打包模块里的环境变量

6.2 样式处理

6.2.1 样式文件的提取

6.2.2 Sass处理

6.2.3 PostCSS

6.3 合并配置webpack-merge

6.4 性能提示

6.5 本章小结

第7章 Webpack性能优化

7.1 打包体积分析工具webpack-bundle-analyzer

7.1.1 安装

7.1.2 使用

7.2 打包速度分析工具speed-measure-webpack-plugin

7.2.1 安装与配置

7.2.2 预处理器与揑件的时间分析

7.3 资源压缩

7.3.1 压缩JS文件

7.3.2 压缩CSS文件

7.4 缩小查找范围

7.4.1 配置预处理器的exclude与include

7.4.2 module.noParse

7.4.3 resolve.modules

7.4.4 resolve.extensions

7.5 代码分割optimization.splitChunks

7.5.1 代码分割

7.5.2 splitChunks

7.5.3 splitChunks示例讲解

7.6 摇树优化Tree Shaking

7.6.1 使用Tree Shaking的原因

7.6.2 使用Tree Shaking

7.6.3 生产环境的优化配置

7.6.4 Webpack 5中对Tree Shaking的改进

7.7 使用缓存

7.7.1 Webpack中的缓存

7.7.2 文件系统缓存的使用

7.8 本章小结

第8章 Webpack原理与拓展

8.1 Webpack构建原理

8.1.1 Webpack打包文件分析

8.1.2 tapable

8.1.3 Webpack打包流程与源码刜探

8.2 Webpack预处理器开发

8.2.1 基础预处理器开发

8.2.2 链式预处理器开发

8.2.3 自定义预处理器传参

8.3 Webpack揑件开发

8.3.1 Webpack揑件开发概述

8.3.2 Webpack揑件开发实例

8.3.3 自定义揑件传参

8.4 本章小结

第9章 Babel入门

9.1 Babel简介

9.2 Babel快速入门

9.2.1 Babel的安装、配置与转码

9.2.2 Babel转码说明

9.3 引入polyfill

9.4 本章小结

第10章 深入Babel

10.1 Babel版本

10.2 Babel配置文件

10.2.1 配置文件

10.2.2 揑件与预设

10.2.3 揑件与预设的短名称

10.2.4 Babel揑件和预设的参数

10.3 预设与揑件的选择

10.3.1 预设的选择

10.3.2 揑件的选择

10.4 babel-polyfill

10.5 @babel/preset-env

10.5.1 @babel/preset-env简介

10.5.2 @babel/preset-env等价设置

10.5.3 @babel/preset-env与browserslist

10.5.4 @babel/preset-env的参数

10.6 @babel/plugin-transform-runtime

10.6.1 @babel/runtime与辅助函数

10.6.2 @babel/plugin-transform-runtime与辅助函数的自动引入

10.6.3 @babel/plugin-transform-runtime与API转换

10.6.4 @babel/plugin-transform-runtime配置项

10.7 本章小结

第11章 Babel工具

11.1 @babel/core

11.2 @babel/cli

11.2.1 @babel/cli的安装与转码

11.2.2 @babel/cli的常用命令

11.3 @babel/node

11.4 本章小结

第12章 Babel原理与Babel插件开发

12.1 Babel原理

12.1.1 Babel转码过程

12.1.2 Babel转码分析

12.2 Babel揑件开发

12.2.1 编写简单的Babel揑件

12.2.2 Babel揑件编写指南

12.2.3 手写let转var揑件

12.2.4 Babel揑件传参

12.3 本章小结

附录A Module Federation与微前端

附录B Babel 8前瞻

Webpack+Babel入门与实例详解是2022年由电子工业出版社出版,作者姜瑞涛。

得书感谢您对《Webpack+Babel入门与实例详解》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。

购买这本书

你可能喜欢
区块链架构与实现:Cosmos详解 电子书
本书系统的阐述Cosmos的相关机制。
Office入门与提高 电子书
#写作特色# 从零开始,循序渐进 无论读者是否从事计算机相关行业的工作,是否接触过Word 2016、Excel 2016、PowerPoint 2016,都能从本书中找到学习起点,循序渐进地完成学习过程。 紧贴实际,案例教学 全书内容均以实例为主线,在此基础上适当扩展知识点,真正实现学以致用。 全彩排版,图文并茂 全彩排版既美观大方又能够突出重点、难点。所有实例的每一步操作,均配有对应的插图和注释,以便读者在学习过程中能够直观、清晰地看到操作过程和效果,提高学习效率。 单双混排,超大容量 本书采用单、双栏混排的形式,大大扩充了信息容量,从而在有限的篇幅中为读者奉送了更多的知识和实战案例。 精选秘技,扩展学习 本书在每章以“高手私房菜”的形式为读者提炼了各种高级操作技巧,为知识点的扩展应用提供了思路。 书盘结合,互动教学 本书配套的多媒体教学光盘内容与书中知识紧密结合并互相补充。在多媒体光盘中,我们仿真工作、生活中的真实场景,通过互动教学帮助读者体验实际应用环境,从而全面理解知识点的运用方法。 #超值DVD多媒体教学光盘# 8小时全程同步教学录像 4大资源免费赠送 配套资源库 本书所有案例的素材和结果文件 扩展学习库 《Office 2016快捷键查询手册》 《WordExcelPPT 2016技巧手册》 《电脑维护与故障处理技巧查询手册》 《Excel 函数查询手册》 《移动办公技巧手册》 《网络搜索与下载技巧手册》 《常用五笔编码查询手册》 《电脑技巧查询手册》 教学视频库 Office 2016软件安装教学录像 Windows 10操作系统安装教学录像 7小时Photoshop CC教学录像 12小时电脑选购组装、维护与故障处理教学录像 办公模板库 2000个Word精选文档模板 1800个Excel典型表格模板 1500个PPT精美演示模板
HBase入门与实践 电子书
大数据时代快速上手HBase行动指南。
Jupyter入门与实战 电子书
本书全面讲解Jupyter的功能、应用、体系架构、配置和部署等内容。全书共8章,前4章面向希望学习Python、数据科学及人工智能相关知识,但尚无软件开发基础的读者,以零起点的方式讲述Jupyter的功能与操作,并以JupyterNotebook为工具,讲述Python的基础知识,以及使用Python开展数据科学工作的入门内容;后4章深入讲述Jupyter的高级应用、配置、管理,以及Jupyter
ReactNative入门与实战 电子书
一本书玩转React Native,携程框架团队倾力打造。