Context: env: undefined

[Rouche]

Hello,

Details

---

I am trying to access env in webpack4 build but it seems to be undefined.
In webpack.config.js the variable is ok, but different from documentation. (process.env.WEBPACK_MODE instead of process.env.NODE_ENV)

Actually, none of the ctx properties have information about the webpack mode.

Error (Logs|Stacks)

---

console.log of the whole ctx object.

{ cwd: 'C:\\shared\\projects\\webpack-boilerplate\\webpack-multi-setup',
  env: undefined,
  ..... (lots of stuff)
}

Reproduction [Code]

---

https://github.com/Rouche/webpack-boilerplate/tree/master/webpack-multi-setup

Environment

---

Windows 10 Pro
npm 6.1.0

[michael-ciniawsky]

Since postcss.config.js works with multiple build tools (CLI, grunt, gulp, ...) env is explicitly based on process.env.NODE_ENV. I suggested to set NODE_ENV alongside mode since they are very similiar and basically solve the probem, but this was rejetced by the webpack maintainers as 'relying on env variables' is a concern for them. You need to set process.env.NODE_ENV alongside mode e.g

NODE_ENV='...' npm run build

webpack.config.js

const env = process.env.NODE_ENV || 'development'

const config = {
  mode: env,
  ...
}

export default config

[Rouche]

Thanks for clarification. But i had to use this workaround, as the context.env always end up undefined.

            new webpack.LoaderOptionsPlugin({
                //test: /postcss-loader$/, // only for this module
                options: {
                  mode: mode
                }
            }),

And access it in postcss.config like this : context.webpack.options.mode

Actually i like it, its regression bullet proof :)

[pete-willard]

Good grief, it consumed two solid hours of my evening to finally stumble upon this. Configuring Webpack can still bite you in the ass in 2019. Thank you both.

My case was that upon webpack start the logic in my postcss.config.js was going haywire as it depended on ctx.env which, as it turns out, was undefined. Modifying and saving any .css file caused the ctx.env to properly contain development. Will stick to using context.webpack.mode from now on

[crtag]

To expand on the previous answer ( thanks @ptrwllrd !) - took me quite a while to solve this until I bumped into this thread.

According to quite lousy docs

postcss-loader exposes context ctx to the config file, making your postcss.config.js dynamic, so can use it to do some real magic

However, what is exposed to the config file is rather bigger and actually usable. Particularly, ctx.webpack.mode that does contain proper reference to the currently set Webpack mode.

So the code (very rough idea) would look something like this - I'm working with PurgeCSS in this case:

module.exports = (ctx) => {
    return {
        plugins: [
            require('postcss-import'),
            ...(ctx.webpack.mode === 'production') ? [purgecss] : []
        ],
    }
};

Docs have to get updated to clarify this.