webpack打包区分开发和生产环境，设置不同的publicPath

待我称王封你为后i 2022-12-13 14:27 271阅读 0赞

# webpack打包区分开发和生产环境，设置不同的publicPath #

## 1、安装 cross-env ##

npm i -D corss-env

## 2、package.json中添加环境参数 ##

`cross-env NODE_ENV=production 和`cross-env NODE\_ENV=development\`

"scripts": { 
        "watch": "webpack --watch",
        "build": "cross-env NODE_ENV=production webpack",
        "dev": "cross-env NODE_ENV=development webpack-dev-server"
    }

3、在需要区分环境的地方使用 process.env.NODE\_ENV

publicPath: process.env.NODE_ENV === 'production' ? 'http://localhost:8083/20201017' : '/'

## 拓展： ##

区分生产、测试、开发环境

`package.json`

"scripts": { 
       "watch": "webpack --watch",
       "build": "cross-env NODE_ENV=production webpack",
       "buildTest": "cross-env NODE_ENV=test webpack",
       "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --watch"
     }

`webpack.config.js`

const pubcliPathTest = '//test.aixiaodou.cn'
    const pubcliPathProd = '//aixiaodou.cn'
    const publicPath = process.env.NODE_ENV === 'production' ? pubcliPathProd : process.env.NODE_ENV === 'test' ? pubcliPathTest : '/'

执行`npm run buildTest` 会打包测试环境  
执行`npm run build` 会打包生产环境  
执行`npm run dev` 开发环境

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack之不同模式的区分打包

文章目录 * 引入 * 初步的区分打包 * 更进一步的区分打包引入 Webpack针对`development`和`production`两种模...

墨蓝/ 2024年04月17日 16:03/ 0 赞/ 65 阅读

相关 webpack打包区分开发和生产环境，设置不同的publicPath

webpack打包区分开发和生产环境，设置不同的publicPath 1、安装 cross-env npm i -D corss-env 2、packa

待我称王封你为后i/ 2022年12月13日 14:27/ 0 赞/ 272 阅读

相关 webpack生产环境配置

webpack生产环境配置 const { resolve } = require('path'); const MiniCssExtractPlugi

拼搏现实的明天。/ 2022年10月12日 12:17/ 0 赞/ 253 阅读

相关 Maven 如何为不同的环境打包 —— 开发、测试和生产环境

在开发过程中，我们的软件会面对不同的运行环境，比如开发环境、测试环境、生产环境，而我们的软件在不同的环境中，有的配置可能会不一样，比如数据源配置、日志文件配置、以及一些软件运行

逃离我推掉我的手/ 2022年09月30日 11:44/ 0 赞/ 232 阅读

相关 webpack 生产/开发环境配置文件分离

npm install webpack-merge -D build目录下: base.config.js const path=require("path")

古城微笑少年丶/ 2022年09月16日 04:47/ 0 赞/ 224 阅读

相关 webpack开发和生产两个环境的配置详解

目录 [webpack.base.conf.js][] [webpack.dev.conf.js][] [webpack.prod.conf.js][]

Love The Way You Lie/ 2022年06月17日 08:39/ 0 赞/ 209 阅读

相关 webpack开发环境与生产环境分离

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模

柔情只为你懂/ 2022年06月05日 08:23/ 0 赞/ 241 阅读

相关 Maven 如何为不同的环境打包 —— 开发、测试和生产环境

作为一名程序员，在开发的过程中，经常需要面对不同的运行环境（开发环境、测试环境、生产环境、内网环境、外网环境等等），在不同的环境中，相关的配置一般不一样，比如数据源配置

亦凉/ 2022年05月29日 02:58/ 0 赞/ 583 阅读

相关 webpack如何区分production生产环境和development开发环境？

node有一个特殊内置环境变量：NODE\_ENV，可以从process.env.NODE\_ENV中读取到。当运行npm xx的时候，其实是执行了一个sh命令，去运行不同的

红太狼/ 2022年01月18日 22:09/ 0 赞/ 410 阅读

相关 vue打包后如何区分开发、测试和生产等不同的开发环境

看过vue和webpack api的同学都知道，使用npm run dev可以运行开发环境的代码，使用npm run build就是打包生产环境的代码。但是如果我还有测试环境和

我会带着你远行/ 2021年09月15日 12:08/ 0 赞/ 790 阅读