美文网首页
webpack学习第十七步—— 打包的环境变量

webpack学习第十七步—— 打包的环境变量

作者: Love小六六 | 来源:发表于2020-02-14 20:10 被阅读0次

    修改webpack的config文件

    • 之前是使用webpack.dev.jswebpack.prod.js去分别mergewebpack.common.js,现在我们统一使用webpack.common.js,通过环境变量来决定去mergewebpack.dev.js还是webpack.prod.js

    • 修改webpack.dev.js

    // 原本是module.exports = merge(commonConfig,devConfig),现在直接导出devConfig,不需要去merge CommonConfig
    
    module.exports = devConfig
    
    • 同理修改webpack.prod.js
    // 原本是module.exports = merge(commonConfig,prodConfig),现在直接导出prodConfig,不需要去merge CommonConfig
    module.exports = prodConfig
    
    • 将merge操作放置webpack.common.js
    // 引入merge、devConfig和prodConfig
    const merge = require('webpack-merge')
    const devConfig = require('./webpack.dev')
    const prodConfig = require('./webpack.prod')
    
    const commonConfig = {
        // 原本写的内容
    }
    // 导出时增加环境变量判断,根据环境变量,去merge不同的webpack config文件
    module.exports = (env) => {
        if(env && env.production) {
            return merge(commonConfig,prodConfig)
        } else return merge(commonConfig,devConfig)
    }
    

    修改package.json的打包命令

    "scripts": {
        "dev": "webpack --config ./config/webpack.common.js",
        "start": "webpack-dev-server --config ./config/webpack.common.js",
        // 使用环境变量
        "build": "webpack --env.production --config ./config/webpack.common.js"
    }
    

    另一种写法

    module.exports = (production) => {
        if(production) {
            return merge(commonConfig,prodConfig)
        } else return merge(commonConfig,devConfig)
    }
    
    • 此时打包命令可以修改如下
    "build": "webpack --env production --config ./config/webpack.common.js"
    

    自定义环境变量

    module.exports = (env) => {
        if(env && env.production === 'abc') {
            return merge(commonConfig,prodConfig)
        } else return merge(commonConfig,devConfig)
    }
    
    "build": "webpack --env.production=abc --config ./config/webpack.common.js"
    

    相关文章

      网友评论

          本文标题:webpack学习第十七步—— 打包的环境变量

          本文链接:https://www.haomeiwen.com/subject/dftiiqtx.html