Webpack打包不同的测试环境以及对应包名

最新推荐文章于 2024-04-29 15:18:37 发布
最新推荐文章于 2024-04-29 15:18:37 发布
阅读量724 收藏 1
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33601443/article/details/104498245
版权

输出值不同

在脚本中
在这里插入图片描述
若在config下的index中有

	console.log(process.env)

则会在打包的控制台中有输出，在npm run dev这种的环境不会有输出
在这里插入图片描述
此处的值与packgae.json中定义的值完全相同
不同的打包命令
而若是在自己定义的js模块中，打印process.env的值，则会发现
定义的的api接口文件
其值，与在config文件夹下中，导出的值相同
dev.env.js
dev.env.js中的值
页面上打印出值
这就给我们打包的过程中，进行动态url和动态包名提供了思路

二水你要努力啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包测试_webpack vue-cli2 配置打包测试环境
weixin_29514317的博客
01-17 294
目前vue-cli2上原配置是只有开发环境dev和线上环境prod的配置，但是我们实际场景上还有很多需要一个测试环境test,下面就是对测试环境的配置，将测试环境和线上环境的打包代码分开就不需要切来切去了1. 复制一份build/build.js文件命名为build/build-test.js 修改这三处地方2. 复制一份build/webpack.prod.conf.js文件命名为build/w...
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
webpack4配置之——20：发布并预览测试及生产环境
kevin的博客
03-21 734
发布测试及生产环境 一个项目从开发到测试到上线，这个过程的三个阶段，需要三个环境的代码,也就需要三套webpack配置文件 开发环境(webpack.dev.conf.js)：怎么方便怎么来~，想怎么配置就怎么配置； 测试环境(webpack.test.conf.js)：测试环境的配置与生产环境要一致，以达到在测试环境还原生产环境BUG的目的，其与生产环境不同之处在于，测试环境打包可以不用压缩，...
webpack 区分环境
最新发布
qq_18422039的博客
04-29 862
在开始构建时，webpack如果发现配置是一个函数，会调用该函数，将函数返回的对象作为配置内容，因此，开发者可以根据不同的环境返回不同的对象。在调用webpack函数时，webpack会向函数传入一个参数env，该参数的值来自于webpack命令中给env指定的值，例如。这样一来，我们就可以在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果。为了更好的适应这种要求，webpack允许配置不仅可以是一个对象，还可以是一个。有些时候，我们需要针对生产环境和开发环境分别书写webpack配置。
webpack实现开发、测试、生产等环境的打包切换
频繁记录
08-23 846
webpack实现开发、测试、生产等环境的打包切换
为不同的环境的配置设置的WebPack
qfgg3的专栏
03-13 3849
＃645为不同的环境的配置设置的WebPack  金太勋 @纪州 场景＃ 例如，如果要在多个捆绑环境如下： 如果你需要代码组件，仅捆绑（默认）。让独立。如果需要封装，模块依赖组件来源捆绑在一起。让包装WebPACK中的环境通过分离配置文件，并让它相契合的WebPack运行环境合并 的WebPack合并安装＃ 的WebPack合并 $ cd path
详解Webpack多环境代码打包的方法
12-09
接下来，你需要在 `build` 目录下创建对应的 `test.js` 文件，该文件将负责处理测试环境的打包逻辑。在这个文件中，你可以通过设置环境变量（如 `NODE_ENV`）来区分不同环境。例如： ```javascript process.env....
使用webpack打包后的vue项目如何正确运行（express）
10-17
这种方法不仅适用于本地开发测试，也可以在生产环境中使用，只需将服务器指向对应的域名和端口即可。 总结来说，将 Vue 项目与 Express 结合，可以方便地部署和运行打包后的应用。这得益于 Express 对静态资源的...
vue如何自动化打包测试环境和正式环境的dist/test文件
10-16
以下将详细介绍如何在Vue项目中实现自动化打包测试环境和正式环境的`dist/test`文件。 首先，我们需要在`package.json`中新增命令行脚本，以便通过命令行调用不同的打包任务。在`scripts`部分添加`test`命令，如下...
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
10-16
现在，你可以通过运行 `npm run build--test` 来打包测试环境的项目，而 `npm run build` 仍然用于生产环境。这些命令会自动根据环境变量读取相应的配置，无需手动更改代码。这样，你就可以在开发、测试和生产环境中...
Webpack打包实例测试代码
03-28
Webpack打包实例测试代码
webpack打包名称优化
momDIY的博客
05-18 2505
一个开发后期考虑的优化问题 一、问题描述 webpack项目打包默认名称是dist,每次打包之后都会将上一次打包的文件覆盖。 每次打完包想通过名称知道这个包的版本日期，且想保存下每日版本的包，怎么搞？ 二、解决思路 1.打包文件覆盖问题 仔细看下以下配置代码你就明白了 // package.json "scripts": { "clean": "rimraf dist", "b...
webpack之基础篇（五）：配置开发、测试、生产环境
I大俊
11-26 1923
配置开发、测试、生产环境
08-webpack5学习-通过命令行参数区分打包环境
纯黑色山羊
06-19 243
webpack5-命令行参数区分打包
使用webpack打包代码——生产环境打包
m0_63238326的博客
10-14 491
在我们每次打包的时候（npm run dev），都是按照最新的 src 目录下的内容进行打包的，当你修改了 src目录 下的文件时，需要手动删除dist 目录，然后在进行最新一次的打包，生成最新的 dist 目录。使用 Webpack 打包代码的主要原因是将多个模块化的代码文件打包成一个或多个单独的文件，以便在浏览器中加载和执行。运行命令后，会默认生成一个叫做 dist 的目录，默认会把打包结果生成的 main.js 放在这个目录中。// title 就是生成的html文件的title 标签里面的内容。
【零基础学习Webpack】webpack不同环境打包
球球博客
10-22 1078
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 创
学会用Webpack搭建开发环境并打包代码
来自计科大一萌新的编程记录本
07-24 1450
学习目标：1.学会如何用webpack搭建开发环境 2.进一步深入学习如何用webpack打包并能优化代码
vuecli3 生产开发测试环境以及输出文件目录打包配置
06-06
好的，以下是对应的配置： 1. 生产环境配置： 在`package.json`文件中，添加如下命令： ``` ...以上就是生产、开发和测试环境的配置，同时也可以通过`process.env.NODE_ENV`变量来区分不同的环境。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值