I ran into an issue with using webpack-encore in combination with tailwind css.
Tailwind has options to purge the css, which is only ran when setting NODE_ENV to production (docs).
I expected the encore production command to set this environment variable as well. I could open a PR to set this env variable if it has not been set when running the command, but i'd like to know if that is something this library should do.
For now my workaround is to change the script in my package.json to NODE_ENV=production encore production --progress
I had the same issue with PurgeCSS and Tailwind too, I've added this line in my webpack.config.js:
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
+// Manually define `process.env.NODE_ENV`, since Encore does not do it already
+process.env.NODE_ENV = process.env.NODE_ENV || (Encore.isProduction() ? 'production' : 'development');
You can send a PR, but I remember that it was not wanted to automatically define process.env.NODE_ENV in Encore... but I may be wrong.
Webpack doesn't do it by default (see the note here: https://webpack.js.org/guides/production/#specify-the-mode) which is, imo, a reasonable choice since you can't know how third party loader/plugins/... called during the build process will behave depending on the content of that variable.
As noted by @Kocal this can be done quite easily though, and an example should be added to a future version of the bundle recipe: https://github.com/symfony/recipes/pull/747
Most helpful comment
I had the same issue with PurgeCSS and Tailwind too, I've added this line in my
webpack.config.js:You can send a PR, but I remember that it was not wanted to automatically define
process.env.NODE_ENVin Encore... but I may be wrong.