更新时间:2024-01-25 17:13:00
封面
版权信息
作者简介
内容简介
前言
读者服务
第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-server
5.1.1 文件监听模式
5.1.2 webpack-dev-server的安装与启动
5.1.3 webpack-dev-server的常用参数
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 本章小结