Search code examples
node.jswebpackecmascript-6configwebpack-3

How come, Webpack directly imports webpack.config.babel.js?


I am new on a pretty big ReactJS project. On top level, it does not have the usual webpack.config.js, but only a `webpack.config.babel.js'. That this one does indeed get used I can verify, when running

> webpack

gets called (through npm run with NODE_ENV=development and WEBPACK_CONFIG=server_dev², but that should not matter much).

Why is that so?

a) If I remove that babel-config, I get a rightful complaint, that:

A configuration file could be named 'webpack.config.js' in the current directory.

b) If, instead, I add my own do-almost-nothing webpack.config.js that one indeed “rules” (with webpack.config.babel.js no longer being used).


So, apparently, there's an “invible” default webpack.config.js that kicks in, if this file is missing. And again, apparently?, this default configuration somehow caters to the webpack-configuration? By what? By virtue of having those node-modules installed?

Or is .babelrc a marker file of sorts to webpack?

Interestingly, this project, preact-www project has the same thing. (nor original webpack config, but the webpack flavour). So they know something, I don't...


Solution

  • Webpack uses interpret to load configuration file. It takes first file with basename webpack.config or webpackfile and any extension interpret knows. Additionally, it gives priority to .js files.

    After having found the config, it registers corresponding compiler and requires the config. Particularly in case of .babel.js, it tries to require these three modules one after another until one of them is found. If it succeeds, babel basically hooks into requiring files.