webpack5进阶-学习笔记

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

1. 区分环境打包

1.1 通过环境变量区分

执行webpack命令时可携带环境变量，并在webpack.config.js中通过函数参数形式接收。

1.2 通过配置文件区分

1.2.1 配置文件配置过程

(1) 安装webpack-merge ： npm i -D webpack-merge 或 yarn add webpack-merge -D
(2) 在项目目录下创建配置文件

(3) 将开发环境和生产环境不同的配置分别提取到各自的配置文件中（例如压缩html、css等），将公共的配置提取到基础配置文件中（例如处理图片、文件、服务器等），并在开发环境和生产环境配置文件中引入公共配置。

1.2.2 在package.json中配置命令

在package.json文件的scripts属性中可配置webpack命令的npm简化命令，通过npm run + 简化命令执行对应的webpack命令。

1.2.3 使用Defineplugin配置接口地址

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

2. 自定义plugin

2.1 自定义插件步骤

(1) 创建自定义插件

(2) 在webpack.config.js中使用插件

(3) 自定义插件处理文件的功能逻辑：在插件的apply方法中，通过上下文compilation获取到文件名称，根据不同文件名称处理对应文件

(4) 创建插件实例时可传入配置项，则apply方法中可根据配置项内容进行逻辑处理，更加灵活。

3. 代码分离

方式：

3.1 多入口打包

案例：

3.2 提取公共文件

3.3 动态加载