在 JavaScript 文件中檢測 Webpack 模式

Question

我正在使用 Webpack 構建一組 ReactJS 文件。

是否可以檢測到 JSX 文件內部正在使用 Webpack 模式： "none" 、 "development"或"production" ？

例如，我想要一些開發模式下的console.log()語句和全局變量，而不是生產模式。

Answer 1

可以構建 Webpack 包進行開發：

$ npx webpack --config webpack.config.js --mode=development

並用於生產：

$ npx webpack --config webpack.config.js --mode=production

要知道當前構建是處於開發模式還是生產模式，應在webpack.config.js中使用webpack.DefinePlugin() ：

const webpack = require('webpack');

module.exports = (env, argv) => {
    return {
        // other directives...
        plugins: [
            new webpack.DefinePlugin({
                PRODUCTION: JSON.stringify(argv.mode === 'production'),
            }),
        ],
    }
};

然后在捆綁的 JavaScript 文件中可以進行以下檢查：

if (PRODUCTION) {
    console.log("This is a production build.");
} else {
    console.log("This is a development build.");
}

請注意，此處的PRODUCTION不會用作全局變量，而是用作解析為true或false的模板變量。