webpack.DefinePlugin定義配置項供程序運行時使用

前言

最近工作中有使用到webpack的DefinePlugin來定義配置項（如配置開關，服務器請求url等），供業務代碼調用

這個插件用來定義全局變量，在webpack打包的時候會對這些變量做替換

最好的學習示例

使用新版本的 vue-cli ，生成的vue init webpack 工程，將是最好的學習示例

vue init webpack 你的項目名稱

webpack-merge

一般DefinePlugin都結合webpack-merge，所以你的項目可能需要安裝下 webpack-merge

npm install --save-dev webpack-merge

npm install --save-dev webpack-merge

特別注意

如果自己的業務代碼是TypeScript，那麼在TypeScript中使用配置的環境變時就需要採用索引語法來訪問配置項

// webpack，打包腳本配置項，示例
 plugins: [
               new webpack.DefinePlugin({
                       'process.env.isMiniProgram': '"true"',
               }),
       ],
//如下示例，TypeScript 代碼文件中
 process.env["isMiniProgram"] == "true"

參考文檔

• webpack.DefinePlugin使用介紹
• 實用webpack插件之DefinePlugin
• using process.env in TypeScript
• 微信小程序環境判斷