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 看区别
相关推荐
芥子沫1 小时前
VSCode添加Python、Java注释技巧、模板
开发语言·前端·javascript
cos2 小时前
FE Bits 前端周周谈 Vol.2|V8 提速 JSON.stringify 2x,Vite 周下载首超 Webpack
前端·javascript·css
wfsm2 小时前
pdf预览Vue-PDF-Embed
前端
wangbing11252 小时前
界面规范的其他框架实现-列表-layui实现
前端·javascript·layui
Hurry63 小时前
web应用服务器tomcat
java·前端·tomcat
烛阴4 小时前
Sin -- 重复的、流动的波浪
前端·webgl
北'辰6 小时前
DeepSeek智能考试系统智能体
前端·后端·架构·开源·github·deepseek
前端历劫之路6 小时前
🔥 1.30 分!我的 JS 库 Mettle.js 杀入全球性能榜,紧追 Vue
前端·javascript·vue.js
爱敲代码的小旗7 小时前
Webpack 5 高性能配置方案
前端·webpack·node.js
Murray的菜鸟笔记7 小时前
【Vue Router】路由模式、懒加载、守卫、权限、缓存
前端·vue router