webpack多环境打包配置

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量3.5k 收藏 8
点赞数 1
分类专栏： javascript 文章标签： webapck 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l344938248/article/details/89969930
版权
本文介绍了如何基于webpack 2.x 配置多环境打包，以适应不同环境如测试、预发和正式环境下的请求URL。通过安装cross-env进行跨平台环境变量设置，修改package.json和build.js，以及创建不同环境的.env.js配置文件，确保每次打包时能自动适应不同环境的基础URL。最后在webpack.prod.config.js中应用这些配置，并用axios测试HTTP请求的baseURL是否正确。
摘要由CSDN通过智能技术生成

基于webpack 2.x 的多环境打包配置

在我们实际的项目开发中，可能有多个部署环境，测试环境，预发环境，正式环境。每个环境的请求URL都不同，每次打包时手动更换很麻烦，此时就需要配置多环境打包。

  1. 安装cross-env

Run scripts that set and use environment variables across platforms
跨平台设置和使用环境变量的运行脚本

	npm install  cross-env --save
	Or
	yarn add cross-env --save
  1. 修改package.json

build 通过cross-env 设置了不同的变量 env_config ,在node环境下运行build.js

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "build:test": "cross-env env_config=test node build/build.js",
    "build:pre": "cross-env env_config=pre node
最低0.47元/天 解锁文章
淡定如斯
关注
专栏目录
webpack打包配置
super1223的博客
07-08 317
webpack打包配置 webpack的4.x版本中默认约定: 打包的入口文件为src-> index.js 打包的输出文件为dist -> main.js 如果不适用webpack打包，那么浏览器将无法识别ES6模板规范。 修改打包入口和出口 项目根目录新建webpack.config.js文件，加入配置代码 const path = require('path') //导入node.js操作路径的模块 module.exports = { mode: 'develop
Vue+webpack项目的多环境打包配置(vue-cli 2.x)
Cool的博客
08-12 2189
背景：由于需要将应用部署到线上开发环境、线上测试环境、线上预发环境、线上生产环境，而每个环境的访问地址是不同的。如果每次更改请求地址未免有些繁琐，就考虑在本地进行一次性配置。 代码管理工具：git 代码分支： 1.0-dev // 开发分支 1.0-test // 测试分支 1.0-pre // 预发分支 1.0 // 正式分支 应用部署服务器：阿里云服务器 一、安装依赖：cross-env 使用cross-env解决跨平台设置环境变量的问题 安装：np...
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 3929
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
Vue WebPack 多环境配置
℡メ㏑╭ァ小凯
01-29 624
默认WebPack创建好的配置在config里面 使用process.env.你配置的Key process.env.ADMIN_TABS_KEY 注意点，这个alter或者console.log的时候才能看到值，如果F12调试的话，process报错undefined，就是说F12看不到值，只能在代码里面输出处理 ...
webpack 开发环境的基本配置
wzg0817的博客
07-17 353
文章目录1. webpack 初体验1.1 初始化配置1.2 编译打包应用2. webpack 开发环境的基本配置2.1 创建配置文件2.2 打包样式资源2.3 打包 HTML资源2.4 打包图片资源2.5 打包其他资源2.6 devserver2.7 开发环境的配置 1. webpack 初体验 1.1 初始化配置 初始化 package.json 输入指令: npm init 下载并安装 webpack 输入指令: npm install webpack webpack-cli -g
webpack开发环境基本配置
MoonNight608的博客
12-22 156
开发环境配置文件 webpack.config.js 开发环境配置文件webpack.config.js 1、下载css-loader、style-loader、less-loader、less npm i css-loader style-loader less-loader less -D 2、打包html资源，下载html-webpack-plugin npm install --save-dev html-webpack-plugin 3、打包图片资源、下载图片html-loader、url-l
Webpack使用多环境配置
菜鸟厚非
09-03 1万+
用过 webpack 的小伙伴都知道，在下项目的根目录下放置一个 webpack.config.js 配置文件。无论是使用 webpack 启动项目，还是打包项目，使用的都是 webpack.config.js 这一个配置文件。但是 webpack.config.js 有时会配置一些开发环境的文件，这样配置便于我们调试。如果项目打包为生产环境的发布文件，此时有些配置是开发环境的（为启用压缩、多余的开发环境配置）。
vue+webpack多环境打包配置（不同环境不同命令）
热门推荐
qq_39696861的博客
08-08 1万+
 以前在打包项目，会写三个环境地址，打包前都需要手动切换地址，实现多环境打包配置后可以省掉这一步。   本文来谈一谈多环境打包的配置方法（本人是一枚前端小透明，用的方法不是最优，若有更优的，欢迎指教）  原文参考链接： https://blog.csdn.net/zuoyiran520081/article/details/80812788 1、在根目录下 的config文件夹下新建test...
vue项目中运用webpack动态配置打包多种环境域名的方法
10-16
文章最后总结到，通过这样的动态配置方法，我们不仅能够灵活地根据不同环境打包出不同的应用版本，而且在项目结构不变的情况下，可以很方便地添加或修改环境配置，极大地提高了项目的可维护性和可扩展性。...
webpack 打包配置
这个人很懒~
06-27 718
处理html、css、js、vue、jsx、图片等文件、压缩处理好的文件、分割压缩好的文件、路由懒加载、开启缓存和热更新、开启多线程打包
1. webpack 介绍及初体验
李嘉城的博客
10-31 707
webpack 是一个静态资源打包工具。从图中我们可以看出，webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，输出的文件就是编译好的文件，就可以在浏览器端运行了。开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module语法，还能压缩 JS 代码。
webpack打包配置最全！！！！！！
weixin_49463158的博客
08-01 1876
webpake模块化使用场景 创建列表隔行变色项目： ① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index.html 首页 ④ 初始化首页基本的结构 ⑤ 运行 npm install jquery –S 命令，安装 jQuery ⑥ 通过模块化的形式，实现列表隔行变色效果 结果发现没有配置导致隔行变色无法实现 配置webpake ① 运行 npm install webpack we
webpack(模块打包工具)的配置
Zeng_Z_H的博客
02-28 433
webpack使用步骤 环境准备 1.初始化包环境（得到package.json文件） npm init -y 2.安装依赖包 npm install webpack webpack-cli -D 3.配置scripts (自定义命令) "scripts ":{ "build":"webpack" } webpack-入口和出口 配置文档: https://webpack.docschina.org/concepts/#entry 1.新建webpack.config.js
webpack打包基础配置
weixin_50367873的博客
03-08 201
webpack打包基础配置
Webpack多环境打包策略及实践指南
总结来说，通过在`package.json`中添加命令行指令，结合环境变量和Webpack的多环境配置，可以有效地管理代码的多环境打包流程，减少错误和提高部署效率。同时，这种策略有助于团队协作和版本控制，使代码管理更为...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值