webpack.DefinePlugin定义配置项供程序运行时使用


前言

最近工作中有使用到webpack的DefinePlugin来定义配置项（如配置开关，服务器请求url等），供业务代码调用

1
这个插件用来定义全局变量，在webpack打包的时候会对这些变量做替换

最好的学习示例

使用新版本的 vue-cli ，生成的vue init webpack 工程，将是最好的学习示例

1
vue init webpack 你的项目名称

在这里插入图片描述

webpack-merge

一般DefinePlugin都结合webpack-merge，所以你的项目可能需要安装下 webpack-merge

1
npm install --save-dev webpack-merge

npm install --save-dev webpack-merge

特别注意

如果自己的业务代码是TypeScript，那么在TypeScript中使用配置的环境变时就需要采用索引语法来访问配置项

1
2
3
4
5
6
7
8
// webpack，打包脚本配置项，示例
 plugins: [
               new webpack.DefinePlugin({
                       'process.env.isMiniProgram': '"true"',
               }),
       ],
//如下示例，TypeScript 代码文件中
 process.env["isMiniProgram"] == "true"

参考文档

  • webpack.DefinePlugin使用介绍
  • 实用webpack插件之DefinePlugin
  • using process.env in TypeScript
  • 微信小程序环境判断