Обнаружение режима Webpack в файлах JavaScript

#javascript #reactjs #webpack

#javascript #reactjs #webpack

Вопрос:

Я создаю пакет файлов ReactJS с помощью Webpack.

Возможно ли определить внутри файлов JSX, какой режим Webpack используется: "none" , "development" , или "production" ?

Например, я хотел бы, чтобы некоторые console.log() операторы и глобальные переменные находились в режиме разработки, но не в режиме производства.

Комментарии:

1. Я думаю, что это довольно часто используется process.env.NODE_ENV для этой цели.

2. Возможно, вы захотите проверить плагин определения Webpack .

3. Спасибо за советы. Я нашел решение и опубликовал его ниже.

Ответ №1:

Можно создать пакет Webpack для разработки с помощью:

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

и для производства с:

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

Чтобы узнать, находится ли текущая сборка в режиме разработки или в производственном режиме, webpack.DefinePlugin() следует использовать в webpack.config.js :

 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 .