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 看区别
相关推荐
CoolerWu1 分钟前
Trae Solo 实战指南:从"会用"到"用好"的协作方法论
前端·javascript
听风说图3 分钟前
Figma画布协议揭秘:组件实例的SymbolOverrides覆盖机制
前端·canvas
小杨前端5 分钟前
前端如何自己实现一个webpack的热更新?
前端
@大迁世界7 分钟前
02.CSS变量 (Variables)
前端·css
鹏多多10 分钟前
轻量+响应式!React瀑布流插件react-masonry-css的详细教程和案例
前端·javascript·react.js
用户3458482850514 分钟前
java中的tomicInteger/AtomicLong介绍
前端·后端
一颗宁檬不酸15 分钟前
Vue.js 初学者基础知识点总结 第一弹
前端·javascript·vue.js
xiaoxue..17 分钟前
解析 LocalStorage与事件委托在前端数据持久化中的应用
前端·javascript·面试
Mintopia17 分钟前
「无界」全局浮窗组件设计与父子组件最佳实践
前端·前端框架·前端工程化
@cc小鱼仔仔30 分钟前
vue 知识点
前端·javascript·vue.js