怎么来,Webpack直接导入webpack.config.babel.js?

时间:2017-09-15 12:23:27

标签: node.js webpack ecmascript-6 config webpack-3

我是一个非常大的ReactJS项目的新手。在顶层,具有通常的webpack.config.js,但只有`webpack.config.babel.js'。这个确实得到了使用我可以在运行时验证

> webpack

被调用(通过npm run使用NODE_ENV = development和WEBPACK_CONFIG =server_dev²,但这并不重要。)

为什么会这样?

a)如果我删除了babel-config,我会得到合理的投诉:

  

当前配置文件可以命名为“webpack.config.js”   。目录

b)相反,如果我添加了自己的几乎没有webpack.config.js那个确实“规则”(不再使用webpack.config.babel.js)。

所以,显然,如果缺少此文件,则会出现“无形”默认webpack.config.js。再次,显然?,这个默认配置以某种方式迎合了webpack配置?通过什么方式?是否已安装这些节点模块?

.babelrc是对webpack进行排序的标记文件吗?

有趣的是,这个项目preact-www项目具有相同的功能。 (也不是原始的webpack配置,但是webpack的味道)。所以他们知道一些事情,我不知道......

2 个答案:

答案 0 :(得分:5)

Webpack使用interpretload配置文件。它需要first个文件,其基本名称为webpack.config or webpackfile,任何扩展名interpret都知道。此外,它优先考虑.js个文件。

找到配置后,它registers corresponding compilerrequires the config。特别是在.babel.js的情况下,它会一个接一个地要求these three modules,直到找到其中一个。如果成功,babel基本上hooks需要文件。

答案 1 :(得分:1)

TL;博士;

从webpack第3版开始,您可以使用webpack.config.babel.js代替相同的内容而无法使用.babel'并且很高兴把ES6放进去(发烧友import语句,const等等......)。

让我们说,这个功能没有被过度记录。

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

根据this slighly related answer,babel使用interpret“需要依赖配置文件”。

显然没有,webpack无法在webpack.config文件中使用ES6作为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