再给这些问题补充一个答案:

使用ExtendedDefinePlugin而不是DefinePlugin

npm install extended-define-webpack-plugin --save-dev.

ExtendedDefinePlugin使用起来更简单，并且有文档:-) 链接

因为DefinePlugin缺乏良好的文档，我想通过说它实际上像c#中的#DEFINE一样工作来帮助解决问题。

#if (DEBUG)
        Console.WriteLine("Debugging is enabled.");
#endif

因此，如果你想了解DefinePlugin是如何工作的，请阅读c# #define文档。链接

因为我在上面的帖子上的编辑没有被批准，所以发布了额外的信息。

如果你想从包装中挑选价值。类似于定义的版本号，并通过Javascript中的DefinePlugin访问它。

{"version": "0.0.1"}

然后，导入包。Json在各自的webpack中。config，使用import变量访问该属性，然后在DefinePlugin中使用该属性。

const PACKAGE = require('../package.json');
const _version = PACKAGE.version;//Picks the version number from package.json

例如，webpack上的某些配置。config为DefinePlugin使用元数据:

const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR,
  RELEASE_VERSION:_version//Version attribute retrieved from package.json
});

new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV),
        'HMR': METADATA.HMR,
        'process.env': {
          'ENV': JSON.stringify(METADATA.ENV),
          'NODE_ENV': JSON.stringify(METADATA.ENV),
          'HMR': METADATA.HMR,
          'VERSION': JSON.stringify(METADATA.RELEASE_VERSION)//Setting it for the Scripts usage.
        }
      }),

在任何typescript文件中访问它:

this.versionNumber = process.env.VERSION;

最聪明的方法是这样的:

// webpack.config.js
plugins: [
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(require("./package.json").version)
    })
  ]

感谢罗斯·艾伦

再给这些问题补充一个答案:

使用ExtendedDefinePlugin而不是DefinePlugin

npm install extended-define-webpack-plugin --save-dev.

ExtendedDefinePlugin使用起来更简单，并且有文档:-) 链接

因为DefinePlugin缺乏良好的文档，我想通过说它实际上像c#中的#DEFINE一样工作来帮助解决问题。

#if (DEBUG)
        Console.WriteLine("Debugging is enabled.");
#endif

因此，如果你想了解DefinePlugin是如何工作的，请阅读c# #define文档。链接

我更喜欢使用。env文件不同的环境。

使用webpack.dev.config将env.dev复制到。env到根文件夹 使用webpack.prod.config复制env。刺激到。env

在代码中

use

要求(dotenv) . config (); const API = process.env.API ##，它将存储.env文件中的值

我的webpack版本“webpack”:“^4.29.6”的变通方法非常简单。

//package.json
{
...
 "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
}

你可以在webpack命令中传递——mode参数，然后在webpack.config.js中

 // webpack.config.json
 module.exports = (env,argv) => {
        return {
           ...
           externals: {
            // global app config object
            config: JSON.stringify({
                apiUrl: (argv.mode==="production") ? '/api' : 'localhost:3002/api'
            })
        }
}

我在代码中像这样使用baseurl

// my api service
import config from 'config';
console.log(config.apiUrl) // like fetch(`${config.apiUrl}/users/user-login`)

就我个人而言，我更喜欢以下这些答案:

const webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: prod? `"production"`: '"development"'
        }
      }
    }),
    ...
  ]
};

使用它不会有奇怪的env变量或跨平台问题(使用env变量)。你所要做的就是分别为开发或生产运行普通的webpack或webpack -p。

参考:Github问题