Webpack Version:
2.5
Babel Core Version:
6.24
Babel Loader Version:
6.2.0
Please tell us about your environment:
Windows 10
Behavior:
I am using babel-loader with .babelrc file. When i build for production i want to add some additional options, thats why i have separate section for production. In webpack config i set BABEL_ENV = "production". The issue is that babel-loader doesn't actually use the "production" case in .babelrc. To test it, i commented the development section and bundle doen't build with error on transpiling jsx. Thought for some reason babel-loader uses the default development section of .babelrc. Setting the NODE_ENV = "production" doesn't helped, which should be the expected behavior.
{
"env": {
// "development": {
// "presets": ["es2015", "react", "stage-2"]
// },
"production": {
"presets": [["es2015", { "modules": false }], "react", "stage-2"]
}
}
}
webpack.config.js
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loader: "babel-loader"
}
//....
],
plugins: [
new DefinePlugin({
"process.env": {
"NODE_ENV": production,
"BABEL_ENV": production
}
}),
// ...
]
DefinePlugin sets the environments statically in output files, it doesn't affect loaders. You have to set the runtime environment for the webpack process to change Babel's env.
@loganfsmyth if you mean to run with -p flag, this doesn't help
You should run BABEL_ENV=production webpack or similar.
It's strange behaviour when webpack's loader babel-loader ignores --mode production flag. Isn't?
@Ky6uk The mode flag is an argument for Webpack itself and what plugins and behaviors it enables. I don't think having it influence Babel's configuration as the default would be reasonable. You can always do that yourself, e.g.
module.exports = function(env) {
// ...
{
loader: "babel-loader",
options: {
forceEnv: env.production ? "production" : "development"
}
}
};
in your Webpack config if you'd like.
I'm not sure if this issue was fixed: babel/babel#4539
@Ky6uk The
modeflag is an argument for Webpack itself and what plugins and behaviors it enables. I don't think having it influence Babel's configuration as the default would be reasonable. You can always do that yourself, e.g.module.exports = function(env) { // ... { loader: "babel-loader", options: { forceEnv: env.production ? "production" : "development" } } };in your Webpack config if you'd like.
Above works as charm. however in Babel 7 the changed to envName:
The option
forceEnvhas been removed in favor ofenvNamein Babel 7.
Most helpful comment
@Ky6uk The
modeflag is an argument for Webpack itself and what plugins and behaviors it enables. I don't think having it influence Babel's configuration as the default would be reasonable. You can always do that yourself, e.g.in your Webpack config if you'd like.