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 看区别
相关推荐
美狐美颜sdk3 小时前
从人脸关键点到动态贴图:面具特效在美颜SDK中的实现原理
前端·图像处理·人工智能·直播美颜sdk·美颜api
我命由我123453 小时前
React Router 6 - 编程式路由导航、useInRouterContext、useNavigationType
前端·javascript·react.js·前端框架·html·ecmascript·js
威联通网络存储3 小时前
告别掉帧与素材损毁:威联通 QuTS hero 如何重塑影视后期协同工作流
前端·网络·人工智能·python
anOnion3 小时前
构建无障碍组件之Tabs Pattern
前端·html·交互设计
一招定胜负4 小时前
课堂教学质量综合评分系统
java·linux·前端
2301_780669864 小时前
前端logo替换开发
前端·vue.js
启山智软5 小时前
【启山智软智能商城系统技术架构剖析】
java·前端·架构
我命由我123455 小时前
React Router 6 - 嵌套路由、路由传递参数
前端·javascript·react.js·前端框架·html·ecmascript·js
十六年开源服务商5 小时前
2026年WordPress网站地图完整指南
java·前端·javascript
GISer_Jing6 小时前
Agent架构师详解:Skill是什么?附CSDN博客撰写可复用Skill示例
前端·ai·aigc