webpack5进阶-学习笔记

学习连接:https://www.bilibili.com/video/BV1964y1k7Hm?p=19&spm_id_from=pageDriver

1. 区分环境打包

webpack5进阶-学习笔记

1.1 通过环境变量区分

执行webpack命令时可携带环境变量,并在webpack.config.js中通过函数参数形式接收。
webpack5进阶-学习笔记

1.2 通过配置文件区分

webpack5进阶-学习笔记webpack5进阶-学习笔记

1.2.1 配置文件配置过程

(1) 安装webpack-merge : npm i -D webpack-merge 或 yarn add webpack-merge -D
(2) 在项目目录下创建配置文件
webpack5进阶-学习笔记
(3) 将开发环境和生产环境不同的配置分别提取到各自的配置文件中(例如压缩html、css等),将公共的配置提取到基础配置文件中(例如处理图片、文件、服务器等),并在开发环境和生产环境配置文件中引入公共配置。
webpack5进阶-学习笔记webpack5进阶-学习笔记

1.2.2 在package.json中配置命令

在package.json文件的scripts属性中可配置webpack命令的npm简化命令,通过npm run + 简化命令执行对应的webpack命令。
webpack5进阶-学习笔记

1.2.3 使用Defineplugin配置接口地址

webpack5进阶-学习笔记
使用Defineplugin为开发环境和生产环境注入不同接口地址。可在开发配置文件和生产配置文件中通过此插件配置不同的接口地址,在源js文件中可使用配置的地址,则webpack打包后的js中能够根据当前环境获取对应的接口地址。
webpack5进阶-学习笔记

webpack5进阶-学习笔记
webpack5进阶-学习笔记
webpack5进阶-学习笔记webpack5进阶-学习笔记
webpack5进阶-学习笔记

2. 自定义plugin

webpack5进阶-学习笔记webpack5进阶-学习笔记webpack5进阶-学习笔记webpack5进阶-学习笔记

2.1 自定义插件步骤

(1) 创建自定义插件
webpack5进阶-学习笔记
(2) 在webpack.config.js中使用插件
webpack5进阶-学习笔记webpack5进阶-学习笔记
(3) 自定义插件处理文件的功能逻辑:在插件的apply方法中,通过上下文compilation获取到文件名称,根据不同文件名称处理对应文件
webpack5进阶-学习笔记
(4) 创建插件实例时可传入配置项,则apply方法中可根据配置项内容进行逻辑处理,更加灵活。
webpack5进阶-学习笔记
webpack5进阶-学习笔记
webpack5进阶-学习笔记

3. 代码分离

webpack5进阶-学习笔记
方式:
webpack5进阶-学习笔记

3.1 多入口打包

webpack5进阶-学习笔记
案例:
webpack5进阶-学习笔记webpack5进阶-学习笔记webpack5进阶-学习笔记

3.2 提取公共文件

webpack5进阶-学习笔记
webpack5进阶-学习笔记

3.3 动态加载

webpack5进阶-学习笔记
webpack5进阶-学习笔记
webpack5进阶-学习笔记
webpack5进阶-学习笔记

上一篇:webpack5.第三篇


下一篇:Webpack5.第二篇