上一篇，我们已经讲解了webpack的基本概念、修改出入口、压缩代码和自动生成HTML、以及各种格式文件的打包.......
今天，我们来讲一讲webpack进阶的知识，例如【通过webpack搭建开发环境】【注入环境变量】【设置解析别名路径 】等等，一起学起来吧~（喜欢的朋友们收藏+关注哦）
PS：因为webpack是建立在node.js的基础上，如果小伙伴们对node.js还不熟悉的，欢迎先去查看我之前发布的node.js相关文章
细讲Node.js模块化，以及 CommonJS 标准语法导出和导入，详细简单易懂！
ECMAScript标准的两种语法--默认导出导入与命名式导出导入
一、Webpack 搭建开发环境
1、背景
1.1 每次改动代码，都要重新打包，很麻烦，所以这里给项目集成 webpack-dev-server 开发服务器，快速开发应用程序
1.2 作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页
2、实现步骤
2.1 下载 webpack-dev-server 软件包到当前项目
npm i webpack-dev-server --save-dev
2.2 配置自定义命令，并设置打包的模式为开发模式
// ... module.exports = { // ... mode: 'development' }
"scripts": { // ... "dev": "webpack serve --mode=development" },
2.3 使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果
在 js / css 文件中修改代码保存后，会实时反馈到浏览器
3、总结
启动 Webpack 开发服务器，会启动一个 Web 服务，实时检测代码变化重新打包，并快速反应最新效果到浏览器页面上
二、Webpack 打包模式
1、分类
| 模式名称 | 模式名字 | 特点 | 场景 |
| 开发模式 | development | 调试代码，实时加载，模块热替换等 | 本地开发 |
| 生产模式 | production | 压缩代码，资源优化，更轻量等 | 打包上线 |
2、如何设置影响 Webpack--两种方式
2.1 在 webpack.config.js 配置文件设置 mode 选项
// ... module.exports = { // ... mode: 'production' }
2.2 在 package.json 命令行设置 mode 参数
"scripts": { "build": "webpack --mode=production", "dev": "webpack serve --mode=development" },
注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置
3、两种打包模式的区别
开发模式注重代码热替换更快，让开发调试代码更便捷
生产模式注重项目体积更小，更轻量，适配不同的浏览器环境
三、Webpack 前端注入环境变量
使用 Webpack 内置的 DefinePlugin 插件 ，实现在编译时，将前端代码中匹配的变量名替换为值或表达式 。从而实现前端项目中，开发模式下打印语句生效，生产模式下打印语句失效这样的效果
配置 webpack.config.js 中给前端注入环境变量 ，代码示例：
// ... const webpack = require('webpack') module.exports = { // ... plugins: [ // ... new webpack.DefinePlugin({ // key 是注入到打包后的前端 JS 代码中作为全局变量 // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串） 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }) ] }
四、Webpack 设置解析别名路径
1、目标
创建 import 或 require 的别名，来确保模块引入变得更简单
2、实现步骤
2.1 原来路径如下
import { checkPhone, checkCode } from '../src/utils/check.js'
2.2 配置解析别名：在 webpack.config.js 中设置
// ... const config = { // ... resolve: { alias: { '@': path.resolve(__dirname, 'src') } } }
路径中的 '@' 符号代表什么意思 ？
看在 webpack 配置中的别名路径是什么，就会在打包时替换成哪个路径使用
2.3 这样我们以后，引入目标模块写的路径就更简单了
import { checkPhone, checkCode } from '@/utils/check.js'
2.4 修改代码的路径后，重新打包观察效果是否正常！
五、优化-CDN使用
1、目标
开发模式使用本地第三方库，生产模式下使用 CDN 加载引入
2、使用CDN
2.1 cdn定义
内容分发网络，指的是一组分布在各个地区的服务器
2.2 cdn作用
把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取。
好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略。
3、实现需求的思路图
假设我们之前发送请求时通过下载axios的npm包来实现，那么下面这张图的思路就是换成了----在生产模式下是通过引入axios的cdn链接来实现，这样做能够减少自身的体积，提升响应性能
4、具体步骤
4.1 在 html 中引入第三方库的 CDN 地址并用模板语法判断
<% if(htmlWebpackPlugin.options.useCdn){ %> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"> <% } %>
4.2 配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）
// 生产环境下使用相关配置 if (process.env.NODE_ENV === 'production') { // 外部扩展（让 webpack 防止 import 的包被打包进来） config.externals = { // key：import from 语句后面的字符串 // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致） 'bootstrap/dist/css/bootstrap.min.css': 'bootstrap', 'axios': 'axios' } }
// ... const config = { // ... plugins: [ new HtmlWebpackPlugin({ // ... // 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用 useCdn: process.env.NODE_ENV === 'production' }) ] }
4.3 两种模式下打包观察效果
通过上下两篇文章，小伙伴们学会webpack了吗，有什么疑问欢迎小伙伴们在评论区提问！也可以点个关注持续关注博主的文章哦！
