文章目录
-
-
-
- 十一、WebPack简介
- 十二、修改webpack打包出口和入口
- 十三、webpack自动生成html文件
- 十四、webpack打包css代码
- 十五、优化-提取css代码
- 十六、优化-压缩过程
- 十七、webpack打包less代码
- 十八、webpack打包图片
- 十九、搭建开发环境
- 二十、开发模式
- 二十一、打包模式的应用
- 二十二、前端--注入环境变量
- [二十三、开发环境调错--source map](#二十三、开发环境调错--source map)
- 二十四、webpack解析别名alias
- 二十五、优化-CDN使用
- 二十六、多页面打包
- 二十七、优化-分割公共代码
-
-
十一、WebPack简介
- 定义
-
注释：
- 静态模块：指的是编写代码过程中的,html,css,js,图片等固定内容的文件
- 打包：把静态模块内容，压缩，整合，转译等（前端工程化）
- less/sass转成css代码
- 把ES6+降级成ES5
- 支持多种模块标准语法
-
使用：
webpack打包默认出口是dist下的main.js
十二、修改webpack打包出口和入口
1、入口
- 默认值：./src/index.js
- 修改：可以在webpack.configuration中配置entry属性，来指定一个或多个不同的入口起点
2、出口
- 默认值：./dist/main.js，其他生成文件默认放置在dist文件夹中
- 修改：在配置中指定一个output字段，来配置这些处理过程
3、步骤
- 项目根目录，新建webpack.config.js配置文件
- 导出配置对象，配置入口，出口文件的路径
十三、webpack自动生成html文件
-
插件：html-webpack-plugin：在Webpack打包时生成html文件
-
步骤
- 1、下载html-webpack-plugin本地软件包
- 2、配置webpack.config.js让Webpack拥有插件功能
- 3、重新打包观察效果
十四、webpack打包css代码
- 加载器css-loader：解析css代码
- 加载器style-loader：把解析后的css代码插入到html document中
- 步骤
- 1、准备css文件代码引入到入口文件中
- 2、下载css-loader和style-loader本地软件包
- 3、配置webpack.config.js让webpack拥有该加载器功能
十五、优化-提取css代码
- 步骤：下载mini-css-extract-plugin本地软件包
- 配置webpack.config.js让webpack拥有该插件功能
- 打包后观察效果
注意：不能和style-loader一起使用
好处：css文件可以被浏览器缓存，减少js文件体积
十六、优化-压缩过程
问题：css代码提取后没有压缩
解决：使用css-minimizer-webpack-plugin插件
-
步骤：
- 1、下载插件
- 2、配置webpack.config.js
- 3、重新打包观察结果
十七、webpack打包less代码
-
需要加载器less-loader
-
使用方法：
- 1、安装less和less-loader
- 2、配置webpack.config.js
十八、webpack打包图片
资源模块：webpack5内置资源模块（字体、图片等）打包，无需额外loader
-
步骤：
- 1、配置webpack.config.js让webpack具有打包图片功能
- 1、占位符hash对模块内容做算法计算，得到映射的数组字母组合的字符串
- 2、占位符ext使用当前模块原本的占位符，例如.png/.jpg等字符串
- 3、占位符query保留引入文件时代码中查询参数(只有URL下生效)
- 2、注意：判断临界值默认为8kb
- 1、大于8kb文件：发送一个单独的文件并导出URL地址
- 2、小于8kb文件：导出一个data URL（base64字符串）
- 1、配置webpack.config.js让webpack具有打包图片功能
注意：注意js中引入本地图片资源用import方式
十九、搭建开发环境
问题：之前改代码，需要重新打包才能运行查看，效率低
- 开发环境：配置webpack-dev-server快速开发程序
- 作用：启动web服务，自动检测代码变化，热更新到网页
注意：dist目录和打包内容是在内存里（更新快）
-
步骤：
- 1、下载webpack-dev-server软件包到当前目录
- 2、设置模式为开发模式，并配置自定义命令
- 3、使用npm run dev来启动开发服务器，试试热更新效果
-
注意：
- 1、webpack-dev-server借助http模块创建8080默认Web服务
- 2、默认以public文件夹作为服务器根目录
- 3、webpack-dev-server根据配置，打包相关代码在内存当中，以output.path的值作为服务器根目录 （所以可以自己拼接访问dist目录下内容）
二十、开发模式
| 模式名称 | 模式名字 | 特点 | 场景 |
|---|---|---|---|
| 开发模式 | development | 调试代码，实时加载，模块热替换等 | 本地开发 |
| 生产模式 | production | 压缩代码，资源优化，更轻量等 | 打包上线 |
-
设置：
- 方式1：在webpack.config.js配置文件设置mode选项
- 方式2：在package.json命令行设置mode参数（--mode= 命令行设置）
- 命令行设置的优先级高于配置文件中的，推荐命令行设置
二十一、打包模式的应用
-
需求：在开发模式下用style-loader内嵌更快，在生产模式下提取css代码（即开发用style-loader，打包用css提取）
-
方案：
- 1、webbpack.config.js配置导出函数，但是局限性大（只接受两种模式）
- 2、借助cross-env（跨平台通用）包命令，设置参数区分环境
-
步骤：
- 1、下载cross-env软件包到当前项目
- 2、配置自定义命令，传入参数名和值（会绑定到process.env对象下）
- 3、在webpack.config.js区分不同环境使用不同配置
- 4、重新打包观察两种配置区别
二十二、前端--注入环境变量
-
需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效
-
问题：cross-env设置的旨在Node.js环境生效，前端代码无法访问process.env.NODE_ENV
-
解决：使用webpack内置的DefinePlugin插件
作用：在编译时，将前端匹配的变量名，替换成对应的值
二十三、开发环境调错--source map
- 问题：代码被压缩和混淆，无法正确定源代码位置
- 解决：source map可以准确追踪error和warning在原始代码的位置
设置：webpack.config.js配置devtool选项
inline-source-map：会将源码位置信息一起打包在js文件被
- 注意：source map仅适用于开发环境，不要在生产环境中使用
二十四、webpack解析别名alias
- 解析别名：配置模块如何解析，创建import引入路径的别名，来确保模块引入变得更简单
- 例如：原来路径如下图所示，比较长且相对路径不安全
- 解决方式：在webpack.config.js中配置解析别名@来表示src绝对路径
二十五、优化-CDN使用
-
CDN定义：内容分发网络，指的是一组分布在各个地区的服务器
-
作用：把静态资源文件/第三方库放在CDN网络各个服务器中，供用户就近请求获取
-
好处：减轻自己服务器的压力，就近请求物理延迟低，配套缓存策略
-
需求：开发使用本地第三方库，生产模式下使用CDN加载引入
-
步骤：
- 1、在html中引入第三方库的CDN地址并用模板语法判断
- 2、配置webpack.config.js中externals外部扩展选项（防止某些import的包被打包）
前端环境变量引入使得生产模式下CDN生效，开发模式下CDN失效
- 注意：CDN查询网站bootCDN
- form-serialize：unpkg.com可以查到
二十六、多页面打包
- 单页面：单个html文件，切换DOM的方式实现不同的业务逻辑展示，后续Vue/React会学到
- 多页面：多个html文件，切换页面实现不同的业务逻辑展示
- 需求：把黑马头条-数据管理平台-内容页面一起引入打包使用
- 步骤
- 1、准备源码放入相应位置，并改用模块化语法导出
- 2、下载form-serialize包并导入到核心代码中使用
- 3、配置webpack.config.js多入口和多页面的设置
占位符./【name】/可以替换为文件名，避免多个入口文件打包到同一个文件夹
二十七、优化-分割公共代码
-
需求：把2格以上页面引用的公共代码提取
-
步骤：
- 1、配置webpack.config.js的splitChunks分割功能
- 2、打包观察效果