Webpack学习笔记

十一、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字符串）

注意：注意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、打包观察效果