文章目录
十一、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、打包观察效果