上一篇,我们已经讲解了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了吗,有什么疑问欢迎小伙伴们在评论区提问!也可以点个关注持续关注博主的文章哦!