展开全部

主编推荐语

一本针对零基础前端开发者讲解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之后的版本都适用。

目录

  • 版权信息
  • 内容简介
  • 前言
  • 第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前瞻
展开全部

评分及书评

4.0
5个评分
  • 用户头像
    给这本书评了
    4.0

    对原理讲解没有很深入 但是新人友好 如果之前没接触过 强烈推荐 入门必备

      转发
      评论
      用户头像
      给这本书评了
      4.0
      浅显易懂

      作者写的比较细致了。

        转发
        评论

      出版方

      电子工业出版社

      电子工业出版社成立于1982年10月,是国务院独资、工信部直属的中央级科技与教育出版社,是专业的信息技术知识集成和服务提供商。经过三十多年的建设与发展,已成为一家以科技和教育出版、期刊、网络、行业支撑服务、数字出版、软件研发、软科学研究、职业培训和教育为核心业务的现代知识服务集团。出版物内容涵盖了电子信息技术的各个分支及工业技术、经济管理、科普与少儿、社科人文等领域,综合出版能力位居全国出版行业前列。