前端框架前置学习Webpack(1) 常用webpack配置

什么是Webpack?

定义

本质上,Webpack是用于现代JavaScript应用程序的静态模块打包工具.当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容.

**静态模块:**指的是编写代码过程中的,html,css,js,图片等固定内容的文件

**打包:**把静态模块内容,压缩,整合,转译等(前端工程化)

• 把less/sass转成css代码
• 把ES6+降级成ES5
• 支持多种模块标准语法

为什么学习Webpack

很多项目基于Webpack构建,并为Vue React脚手架使用做铺垫

使用Webpack

**需求:**封装utils包,校验手机号长度和验证码长度,在src/index.js中使用并打包观察

步骤:

1.新建并初始化项目,编写业务源代码

2.下载webpack webpack-cli到当前项目中(版本独立),并配置局部自定义命令

在终端中使用npm下载webpack

在package.json中配置webpack

使用webpack

修改Webpack打包入口和出口

Webpack配置:影响Webpack打包过程和结果

步骤:

1.项目根目录,新建webpack.config.js配置文件

2.导出配置对象,配置入口,出口文件的路径

entry配置入口

putput配置出口

3.重新打包观察

**注意:**只有和入口产生直接/间接的引入关系,才会被打包

案例:用户登录-长度判断

**需求:**点击登录按钮,判断手机号和验证码长度

步骤:

1.准备用户登录页面

2.编写核心js逻辑代码

3.打包并手动复制网页到dist下,引入打包后的js,运行

核心:

Webpack打包后的代码,作用在前端网页中使用

自动生成html文件

插件html-webpack-plugin:在Webpack打包时生成html文件

步骤:

1.下载html-webpack-plugin本地软件包

2.配置webpack.comfig.js让Wepack拥有插件功能

3.重新打包观察效果

打包css代码

**加载器 css-loader:**解析css代码

加载器style-loader**:**把解析后的css代码插入到DOM

注意:Webpack默认只识别js代码

步骤:

1.准备css文件代码引入到src/login/index.js中(压缩转译处理等)

2.下载css-loader和style-loader本地软件包

3.配置webpack.config.js让Webpack拥有该加载器功能

4.打包后观察效果

优化-提取css代码

插件mini-css-extract-plugin:提取css代码

**注意:**不能和style-loader一起使用

**好处:**css文件可以被浏览器缓存,减少js文件体积

步骤:

1.下载mini-css-extract-plugin本地软件包

2.配置webpack.config.js让Webpack拥有该插件功能

3.打包后观察效果

优化-压缩过程

**问题:**css代码提取后没有压缩

解决: 使用css-minimizer-webpack-plugin插件

步骤:

1.下载css-minimizer-webpack-plugin本地软件包

2.配置webpack.config.js让webpack拥有该功能

3.打包重新观察

打包less代码

**加载器less-loader:**把less代码编译为css代码

步骤:

1.新建less代码(设置背景图)并引入到src/login/index.js中

2.下载less和less-loader本地软件包

注意:less-loader需要搭配less软件包使用

3.配置webpack.config.js让Webpack拥有功能

打包图片

资源模块:Webpack5内置资源模块(字体,图片等)打包,无需额外loader

步骤:

1.配置webpack.comfig.js让Webpack拥有打包图片功能

**占位符[hash]**对模块内容做算法计算,得到映射的数字字母组合的字符串

**占位符[ext]**使用当前模块原本的占位符,例如: .png/.jpg等字符串

**占位符[query]**保留引入文件时代码中串参数(只有URL下生效)

2.打包后观察效果和区别

注意:

判断临界值默认为8kb

大于8kb文件:发送一个单独的文件并导出URL地址

小于8kb文件:导出一个data URI(base64字符串)

webpack搭建开发环境

问题

之前改代码,需重新打包才能运行查看,效率很低

开发环境

配置webpack-dev-server快速开发应用程序

作用:

启动web服务,自动检测代码变化,热更新到网页

注意:dist目录和打包内容是在内存里(更新快)

步骤:

1.下载webpack-dev-server软件包到当前项目

2.设置模式为开发模式,并配置自定义命令

3.使用npm run dev 来启动开发服务器,试试热更新效果

打包模式:

告知webpack使用相应模式的内置优化

分类

|------|-------------|------------------|------|
| 模式名称 | 模式名字 | 特点 | 场景 |
| 开发模式 | development | 调试代码,实时加载,模块热替换等 | 本地开发 |
| 生产模式 | production | 压缩代码,资源优化,更轻量等 | 打包上线 |

设置:

方式1:在webpack.config.js配置文件设置mode选项\

方式2:在package.json命令行设置mode参数

注意:命令行设置的优先级高于配置文件中,推荐用命令行设置

打包模式的应用

需求:

在开发模式下用style-loader内嵌更快,在生产模式小艾提取css代码

方案1:webpack.config.js配置导出函数,但局限性大(只接受2种模式)

方案2:借助cross-env(跨平台通用)包命令,设置参数区分环境

方案3:配置不同的webpack.config.js(适用多种模式差异性较大情况)

步骤:

1.下载cross-env软件包当当前项目

2.配置自定义命令,传入参数名和值(会绑定到process.env对象下)

3.在webpack.config.js区分不同环境使用不同配置

4.重新打包观察两种配置区别

前端-注入环境变量

需求:前端项目中,开发模式下打印语句生效,生产模式下打印语句失败

问题

cross-env设置只在Node.js环境生效,前端代码无法访问peocss.env.NODE_ENV

解决

使用Webpack内置的DefinePlugin插件

**作用:**在编译时,将前端代码中匹配的变量名,替换为值或者表达式

开发环境调错 - source map

问题

代码被压缩和混淆,无法正确定位源代码位置(行数和列数)

source map:可以准确追踪error和warnig在原始代码的位置

设置:

webpack.config.js配置devtool选项

inline-souce-map选项:把源码的位置信息一起打包在js文件内

**注意:**source map 仅适用于开发环境,不要在生产环境使用(防止被查看源码位置)

解析别名alias

解析别名

配置模块如何解析,创建import引入路径别名,来确保模块引入变得简单

例如:原来路径如图,比较长而且相对路径不安全

解决:

在webpack.config.js中配置解析别名@来代表src绝对路径

优化-CDN使用

CDN定义:

内容分发网络,指的是一组分布在各个地区服务器

作用:

把静态资源文件/第三方库放在CDN网络中各个服务器中,供用户请求获取

好处:

减轻自己服务器请求压力,就近请求物理延迟低,配套缓存策略

需求:

开发模式使用本地第三方库,生产模式下使用CDN加载引入

步骤:

1.在html中引入第三方库的CDN地址并用模板语法判断

2.配置webpack.config.js中externals外部扩展选项(防止某些import的包被打包)

3.两种模式下打包观察效果

多页面打包

单页面:

单个html文件,切换DOM的方式实现不同业务逻辑展示,后续Vue/React会学到

多页面:

多个html文件,切换页面实现不同业务逻辑展示

需求:

把内容页面和登录页面一起引入打包

步骤:

1.准备源码(html,css,js)放入相应位置,并改用模块化语法导出

2.下载form-serialize包并导入到核心代码中使用

3.配置webpack.config,js多入口和多页面设置

4.重新打包观察效果

优化-分隔公共代码

**需求:**把2个以上页面引用的公共代码提取

步骤:

1.配置webpack.config.js的splitChunks分隔功能

2.打包观察效果