11 —— 打包模式的应用

需求:在开发模式下想让webpack使用style-loader进行css样式的处理;让它把css代码内嵌在js中;在生产模式下提取css代码

------ 判断当前运行命令时所在的环境

方案:借助cross-env全局软件包,设置参数区分打包运行环境

  • 下载cross-env软件包到当前项目

npm i cross-env --save-dev

  • 配置自定义命令,传入参数名和值

不同环境设置不同的环境变量进行区分

使用 cross-env 来设置 NODE_ENV 环境变量为 "production"

cross-env 会根据当前操作系统选择正确的命令来设置环境变量;

不管是在 Windows、macOS 还是 Linux 上运行该脚本,它都会正常工作

  • 在webpack.config.js区分不同环境使用不同配置

加载器style-loader:把解析后的css代码插入到DOM

mini-css-extract-plugin插件:提取css代码

  • 重新打包 npm run build / npm run dev 看区别
相关推荐
小月鸭8 分钟前
如何理解HTML语义化
前端·html
jump68032 分钟前
url输入到网页展示会发生什么?
前端
诸葛韩信35 分钟前
我们需要了解的Web Workers
前端
brzhang40 分钟前
我觉得可以试试 TOON —— 一个为 LLM 而生的极致压缩数据格式
前端·后端·架构
yivifu1 小时前
JavaScript Selection API详解
java·前端·javascript
这儿有一堆花1 小时前
告别 Class 组件:拥抱 React Hooks 带来的函数式新范式
前端·javascript·react.js
十二春秋1 小时前
场景模拟:基础路由配置
前端
六月的可乐1 小时前
实战干货-Vue实现AI聊天助手全流程解析
前端·vue.js·ai编程
一 乐2 小时前
智慧党建|党务学习|基于SprinBoot+vue的智慧党建学习平台(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·学习
BBB努力学习程序设计3 小时前
CSS Sprite技术:用“雪碧图”提升网站性能的魔法
前端·html