webpack的DefinePlugin插件实现多环境下配置切换

ゝ一世哀愁。 2022-05-13 16:27 88阅读 0赞

# webpack的DefinePlugin插件实现多环境下配置切换 #

### 文章目录 ###

*  前言
 *  实例
 *  项目实战

# 前言 #

在使用`springboot`开发后台时，可以使用`spring.profies.active`实现应用程序在不同的环境可能会有不同的配置，例如数据库连接、日志级别等，开发，测试，生产每个环境可能配置都不一致。  
其实webpack模块化开发也能实现。  
`DefinePlugin` 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。

语法

new webpack.DefinePlugin({
      // Definitions...
    })

其实很简单，就配置一下即可

# 实例 #

例如，开发环境的配置文件webpack.dev.config

new webpack.DefinePlugin({
            "test":"666",
            test1:"777",
            test2:{name:"123",age:12},
            "typeof test3":JSON.stringify("object"),
             test4: JSON.stringify(false)
        })

在项目里定义一个config.js,使用方式如下

console.log(test)
    console.log(test1)
    console.log(test2)
    console.log(typeof test3)
    console.log(test4)

可以直接拿到值，结果如下

![在这里插入图片描述][70]

其中，我们常用的是`test1,test2,test4`的方式

# 项目实战 #

开发环境，`webpack.dev.config`:

webpackConfig.plugins = [
        ...webpackConfig.plugins,
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            DEVELEPMENT: JSON.stringify(true),
            PRODUCTION: JSON.stringify(false),
        })
    ];
    webpackConfig.mode = 'development'
    module.exports = webpackConfig;

生产环境，`webpack.prod.config.js`：

webpackConfig.plugins = [
        ...webpackConfig.plugins,
        new webpack.DefinePlugin({
            DEVELEPMENT: JSON.stringify(false),
            PRODUCTION: JSON.stringify(true),
        })
    ];
    webpack.mode = 'production'
    module.exports = webpackConfig;

使用文件`config.js`:

if(PRODUCTION){
        console.log(window.location)
        let wsProtocol = "wss://"
        if(window.location.protocol === "http:"){
            wsProtocol = "ws://"
        }
        var sockServer = `${wsProtocol}${window.location.host}`
    }else if(DEVELEPMENT){
        var sockServer = `ws://127.0.0.1:9999`
    }
    
    export default{
        sockServer
    }

`config.js`通过没有使用压缩的 `webpack` 的结果:

if(false){
        console.log(window.location)
        let wsProtocol = "wss://"
        if(window.location.protocol === "http:"){
            wsProtocol = "ws://"
        }
        var sockServer = `${wsProtocol}${window.location.host}`
    }else if(true){
        var sockServer = `ws://127.0.0.1:9999`
    }
    
    export default{
        sockServer
    }

通过使用压缩的 `webpack` 的结果:

console.log(window.location)
        let wsProtocol = "wss://"
        if(window.location.protocol === "http:"){
            wsProtocol = "ws://"
        }
        var sockServer = `${wsProtocol}${window.location.host}`

[70]: /images/20220504/da2a7a5fc79a4700833046635d0b0995.png