环境变量

最新推荐文章于 2023-12-25 09:16:37 发布

原创最新推荐文章于 2023-12-25 09:16:37 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Webpack中根据环境变量动态选择配置，通过修改module.exports为函数，接收env参数判断并返回不同环境的配置。同时展示了package.json中scripts字段的配置，如启动开发服务器、打包分析、构建生产环境等。

我们在写webpack 的时候，之前它导出的是一个对象。使用module.exports = {...} 形式。

现在我们把它改成导出一个函数，如下。

module.exports = (env) => {
    if (env && env.production) {
        return // some config production class
    } else {
        return // some config development class
    }
}

这样就可以根据webpack 导出函数的参数，判断使用什么配置了。

接着我们可以打开package.json 文件。对script 进行如下修改

  "scripts": {
    "bundle": "webpack",
    "bundleAnalyse": "webpack --profile --json > stats.json",
    "start": "webpack-dev-server",
    "build": "webpack --env.production"
  },

webpack --env.production 的意思是，通过（webpack中）全局变量向 webpack 的配置文件传递属性 production，它的值默认就是true。

当然还有其他的写法