webpack分环境打包 + 踩坑

最新推荐文章于 2024-11-12 10:39:42 发布
最新推荐文章于 2024-11-12 10:39:42 发布
阅读量941 收藏 1
点赞数 1
分类专栏： webpack 文章标签： webpack 分环境打包 + 采坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37976966/article/details/90182460
版权
本文介绍了如何使用webpack进行分环境打包，包括在package.json中配置环境变量，webpack.base.conf.js的output设置，以及config.js中针对不同环境的路径配置。同时，文章详细讨论了在实际操作中遇到的报错情况，如npm run dev时的环境变量问题和字体文件打包路径错误，并提供了相应的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

webpack打包

一、分环境打包步骤如下：

1.在package.json里要配置不同的环境变量
在这里插入图片描述

注意：

  • Build-test/bulid-product 与build写成一样的就可以了
  • NODE_ENV需要改成不同的环境变量，方便在打包的时候获取到，从而根据不同的环境进行打包
  • cross-env：解决跨平台设置NODE-ENVDE的问题

2.在webpack.base.conf.js的output设置打包的路径
在这里插入图片描述
3.在config.js/config/index.js中的build去配置不同环境的路径
在这里插入图片描述
注意：

  • 需要获取到不同的环境变量 ---- Process.env.NODE.ENV
  • 在不同的环境的js去设置一下
二、报错信息的处理

1.打包完成之后，输入命令npm run dev 报错

最低0.47元/天 解锁文章
webpack生产环境优化及配置总结
Michael_Li的博客
04-03 1340
一 介绍 之前在开发一个react网站项目, 到正式部署到云服务器时才发现对react及webpack生产环境配置没有什么了解, 下面就总结一下自己配置生产环境的内容. 二 需要配置的内容 1. js文件压缩 首先就是要进行打包后的js文件的压缩, 其中要使用uglifyjs-webpack-plugin, 首先使用npm安装这个包, 然后在配置文件中加入插件配置项: //...
webpack v4+升级v5+ 踩坑笔记
clearNew的博客
07-07 1851
工作中遇到了一个小问题，然后搞了两天，怀疑是webpack的问题，因此升级了现有项目的webpack，webpack v4+ 升级到了 v5， node v12+ 升级到了 node v16+， 本来打算升v17的， 发现和16版本改动不小， 和开发其他项目还得切回了， 索性就降到了v16，因此node升级到v17，要慎重啊！！！.........
webpack分环境打包
jstljspservlet的博客
03-27 563
在项目开发中，我们的项目一般分为开发版、测试版、prod版。Vue-cli的默认环境一只有dev和prod两个，之前每次要发布测试版或prod版都是修改了源码中API地址后打包，这样很麻烦。如果能根据不同环境打包就完美了。主要针对不同环境，需要调用多个域的接口有所区分，有时候一个项目中，需要调用多个域名不同的接口，分环境打包就显得非常方便了。 1.安装cross-env npm i --save-...
webpack分环境打包（生产/开发两套打包）
量子前端的博客
06-30 2442
webpack根据生产环境和开发环境开发不同的配置文件并提取共同配置进行优质打包。
【零基础学习Webpack】webpack不同环境打包
球球博客
10-22 1238
Webpack区分环境打包 1、通过环境变量区分 webpack --env.production webpack.config.js中判断env 打包命令：webpack --env=production module.exports = (env, argv) => { if(env.production){ //生产环境的配置 }else{ //开发环境的配置 } } 2、通过不同的配置文件区分 cnpm install webpack-merge -D 创
webpack4:Webpack4 + Typescript + React 踩坑配置之旅
04-25
Webpack 4 搭配 TypeScript 和 React 的配置过程是一次技术深度探索，旨在优化前端开发环境，提升项目构建效率和代码质量。以下是对这个主题的详细解析： **Webpack 4 知识点** Webpack 4 是一个模块打包工具，它...
webpack安装到mac打包踩坑
孟羽鱼的博客
07-23 450
webpack安装到mac打包踩坑 1、 安装node.js 在终端 node -v npm -v 查验版本，看是否安装好 2、 安装webpack 在终端执行 npm install webpack@3.11.0 -g这样就是安装了，-g是全局安装，（tips:可以用webpack -h来验证是否安装成功）。如果不成功，可能是mac权限导致的，用 sudo npm install webpack@3.11.0 -g使用管理员权限执行。（终端会显示password：）输入开机密码，然后等着安装，需要
详解多页应用 Webpack4 配置优化与踩坑记录
11-29
最近新起了一个多页项目，之前都未使用 webpack4，于是准备上手实践一下。这篇文章主要就是一些配置介绍，对于正准备使用 webpack4 的同学，可以做一些参考。 webpack4 相比之前的 2 与 3，改变很大。最主要的一点是...
使用webpack根据不同的环境打包
HQ DevJ的专栏
06-02 1523
使用webpack根据不同的环境打包前提准备工作工作目录结构编写common.jsdev.js,tenv.js,prod.js进行打包配置 前提 我们在进行项目开发的时候，一般在不同的环境下面使用不同的代码分支，常见的有dev-开发分支、test-测试分支、uat-准生产分支、prod-生产分支，生产分支和准生产分支基本上是一样的。dev分支一般作为本地的开发分支使用，连接相关的ip进行相关调试的代码本地联调，测试环境就是对接的测试环境的ip或者域名进行测试联调，生产分支作为线上分支使用，供外部使用。 但是
webpack优化系列一：webpack不同环境打包配置
hyduan_h5的博客
01-10 5018
前言 webpack的env一般分为develop、test以及production，每个环境可能所需配置都不一样，比如请求的后端服务器等等 若每次打包单独修改，那可能太过繁琐，最重要可能打包时忘记，造成不必要的损失 故而，建议将webpack区分不同环境单独配置好，打包时使用不同命令即可 一：环境配置 新建.env.dev文件 NODE_ENV = 'dev' VUE_APP_BASE_UPL='开发环境api' // 其他所需配置都可在此定义 新建.env.test文件 NODE_ENV = 't
webpack 多环境打包
weixin_65808257的博客
10-12 291
我们可以通过设置process.env.NODE_ENV,这里我们使用 cross-env 来设置，它是跨平台的、前面一步一步的学习了 uniapp环境打包 现在来看看webpack打包 vite的后面发。2.package.json设置。一般我们有本地 测试 正式环境。就在需要使用的地方直接用即可。
vue配置webpack打包不同环境
最新发布
qq_45380964的博客
11-12 664
配置文件基本就是复制粘贴改名，可根据需求配置。
Webpack一键打包多个环境
越陌度阡
10-16 621
安装如下插件，以便可以在打包命令中设置环境变量区分不同的环境。在package.json中配置正式环境和测试环境打包命令，同时添加一个命令同打包两个环境。在vue.config.js中添加打包输出配置，其中正式环境打包输出到dist_prod文件夹，测试环境打包输出到dist_test文件夹。在package.json中配置正式环境和测试环境打包命令，同时添加一个命令同打包两个环境。安装如下插件，以便可以在打包命令中设置环境变量区分不同的环境。
学会用Webpack搭建开发环境并打包代码
来自想要赚大钱的小周同学
07-24 1623
学习目标：1.学会如何用webpack搭建开发环境 2.进一步深入学习如何用webpack打包并能优化代码
webpack 打包配置
这个人很懒~
06-27 1348
处理html、css、js、vue、jsx、图片等文件、压缩处理好的文件、分割压缩好的文件、路由懒加载、开启缓存和热更新、开启多线程打包
webpack的环境配置
苗雪松的博客
10-10 575
     许多小伙伴在学到vue时，当做单页面应同时，不可避免的会用到webpack，可是那都是命令自动帮我们做好的，如果想在自己的项目中运用的话，又该怎么做呢？      我在看了一些视频和文档后，决定自己写一篇博客来记录一下我的学习过程，方便广大博友一起学习进步。  步骤： 1打开我们的命令行工具，先进入E盘，然后mkdir命令新建一个文件夹demo，在建立一个webpack_demo。...
webpack入门（十一）-- 配置双环境（开发环境和生产环境配置）
weixin_43516605的博客
10-25 800
webpack双环境配置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值