Estoy creando un paquete de archivos ReactJS con Webpack.
¿Es posible detectar dentro de los archivos JSX qué modo Webpack se está utilizando: "none" , "development" o "production" ?
Por ejemplo, me gustaría algunas declaraciones de console.log() y variables globales en modo de desarrollo pero no en producción.
Uno puede construir el paquete Webpack para desarrollo con:
$ npx webpack --config webpack.config.js --mode=developmenty para producción con:
$ npx webpack --config webpack.config.js --mode=production Para saber si la compilación actual está en modo de desarrollo o en modo de producción, se debe usar webpack.DefinePlugin() en webpack.config.js :
const webpack = require('webpack'); module.exports = (env, argv) => { return { // other directives... plugins: [ new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(argv.mode === 'production'), }), ], } };Luego, en los archivos JavaScript incluidos, uno puede tener esta verificación:
if (PRODUCTION) { console.log("This is a production build."); } else { console.log("This is a development build."); } Tenga en cuenta que PRODUCTION aquí no funcionará como una variable global, sino como una variable de plantilla resuelta en true o false .