1

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...

Frank N
  • 9,625
  • 4
  • 80
  • 110

2 Answers2

7

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.

x-yuri
  • 16,722
  • 15
  • 114
  • 161
1

tl;dr;

As of webpack version 3, you can use a webpack.config.babel.js instead of the same thing w/o '.babel' and happily put ES6 inside it (fancier import statements, const, etc...) right away.

Let's say, this feature is not over-documented.

Let me share my (vague) research with you:

According to this slighly related answer, babel uses interpret which „require dependencies for configuration files“.

Apparently without, webpack could not use ES6 for the javascript in your webpack.config files. (And since webpack is mostly needed, to transpile ES6 to ES5, you'd have a darn hen-and-egg problem, if webpack configured itself required some webpack transpilation before...)

Many projects, including popular ones, do this:

  • having no webpack.config.js
  • using a webpack.config.babel.js containing ES6 (telltale sign:import) instead and right away...

So that seems established best practice for ES6 webpack configuration files, then? Seems so, though I couldn't find that in the webpack documentation, apart from a short feature discussion.

Btw: The mentioned interpret package at least nowadays comes already with webpack 3.x. No need to install anything in addition:

/depot/own/webpacktest $ npm ls interpret

  webpacktest@1.0.0 /depot/own/webpacktest
  └─┬ webpack@3.5.6
    └── interpret@1.0.3
Frank N
  • 9,625
  • 4
  • 80
  • 110