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 看区别
相关推荐
Ai-_Man2 分钟前
我需要批量导出Poe左边栏所有对话,而不是一条具体的对话内容,你们AI导出鸭可以吗?
开发语言·前端·javascript·人工智能·小程序
java1234_小锋3 分钟前
【技术专题】HTML5 网页技术 - Web Storage 本地存储 & 文件 API & 拖放 API
前端·html·html5
恋猫de小郭4 分钟前
Flutter 官方表示:AI 时代代码越来越容易写,为什么还要一套代码库?
android·前端·flutter
软件派11 分钟前
Chrome 插件开发实战指南
前端·chrome
ly768911 分钟前
性能剖析与压测方法论:JMH、async-profiler 与分层瓶颈定位的可复现实验
服务器·前端·数据库·压测·jmh·性能剖析·async-profiler
ZoeLandia24 分钟前
React05:useEffect 与副作用
开发语言·前端·react.js·typescript
狮子座的男孩31 分钟前
html+css基础:24、2D变换(位移/缩放/旋转/扭曲(了解)/多重变换/变换原点)
前端·css·经验分享·html·2d位移·原点变换·缩放/旋转/扭曲
weixin_4173968340 分钟前
酒店弱电怎么验收?四个阶段与逐项检查清单
开发语言·前端·php·综合布线·弱电
风骏时光牛马40 分钟前
探索AI开源工具,解锁原生创造新体验
前端
u01110267543 分钟前
Vue 页面离开后还在轮询?统一清理计时器、监听器与观察器
前端·javascript·vue.js