webpack怎么直接导入了webpack.config.babel.js?

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

我是一个相当大的 ReactJS 项目的新手。在顶层,它 没有 通常的 webpack.config.js,但只有一个“webpack.config.babel.js”。当 运行

时,我可以验证这个确实被使用过
> webpack

被调用(通过 npm run 和 NODE_ENV=development 和 WEBPACK_CONFIG=server_dev²,但这应该无关紧要)。

为什么会这样?

a) 如果我删除那个 babel-config,我会收到合理的投诉,即:

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

b) 相反,如果我添加自己的几乎什么都不做 webpack.config.js 那确实是“规则”(不再使用 webpack.config.babel.js)。


因此,显然,如果此文件丢失,则有一个“无敌的”默认值 webpack.config.js 会启动。又一次,显然?这个默认配置以某种方式迎合了 webpack 配置?通过什么方式?凭借安装了那些节点模块?

或者 .babelrc 是 webpack 的某种标记文件?

有趣的是,这个项目,preact-www项目有相同的东西。 (也不是原始的 webpack 配置,而是 webpack 风格)。所以他们知道一些事情,我不知道...

tl;博士;

从 webpack 版本 3 开始,你可以使用 webpack.config.babel.js 而不是相同的东西 w/o '.babel' 并愉快地将 ES6 放入其中(更高级import 语句、const 等...)。

这么说吧,这个功能没有被过度记录。

让我与您分享我的(模糊的)研究:

根据, babel uses interpret,“需要配置文件的依赖项”。

显然没有,webpack 无法将 ES6 用于 webpack.config 文件中的 javascript。 (而且由于最需要的是 webpack,将 ES6 转换为 ES5,如果 webpack 配置本身需要一些 webpack 转换之前,你会遇到一个该死的母鸡和鸡蛋的问题......)

许多项目,包括 popular ones,这样做:

  • 没有webpack.config.js
  • 立即使用包含 ES6 的 webpack.config.babel.js(标志:import)...

所以这似乎是 ES6 webpack 配置文件的最佳实践,那么? 似乎是这样,尽管我在 webpack 文档中找不到,除了一个简短的 feature discussion.

顺便说一句:至少现在提到的 interpret 包已经带有 webpack 3.x。无需另外安装任何东西:

/depot/own/webpacktest $ npm ls interpret

  webpacktest@1.0.0 /depot/own/webpacktest
  └─┬ webpack@3.5.6
    └── interpret@1.0.3

Webpack 使用 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 个文件。

找到配置后,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进入需要的文件。