webpack不同环境的配置

webpack不同环境的配置

前提条件
  在我们开发项目时,一般会有开发环境与生产环境,不同环境对应不同的url地址或者一些其他配置,这时候,我们就需要不同的config配置文件相结合的形式来完成配置需求。

解决方法:

  1. 首先我们可以先建立3个不同的配置文件,分为webpack.base.config.js(配置基础内容),webpack.dev.config.js(配置开发相关内容)和webpack.prod.config.js(配置生产环境相关内容)。

  2. 安装merge

    yarn add webpack-merge -D
    
  3. 配置webpack.dev.config.js文件:

    const {merge} = require('webpack-merge');
    const baseConfig = require('./webpack.base.config.js')
    
    // 使用merge将base文件与当前配置文件合并
    module.exports = merge(baseConfig,{ 
        mode:'development',   //开发环境
        devServer:{
    
        },
        devtool:'source-map',
        // ...等等一些开发环境需要单独配置的内容
    })
    
  4. 配置webpack.prod.config.js文件:

    const {merge} = require('webpack-merge');
    const baseConfig = require('./webpack.base.config.js')
    
    // 使用merge将base文件与当前配置文件合并
    module.exports = merge(baseConfig,{
        mode:'production',     //生产环境
        // ...等等一些生产环境需要单独配置的内容
    })
    
  5. 在webpack.base.config.js文件中配置一些公用内容,如入口、出口、服务、模块、插件等等即可。

    (o゜▽゜)o☆

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值