Webpack.js.org: Config - ES2015 Imports in Configuration

[pksjce]

_From @telekid on July 26, 2016 22:13_

I'm submitting a bug report

Webpack version:
2.1.0-beta.20

I'm running into what seems like a bit of a Catch-22 when trying to use ES6 Modules within my webpack.config.babel.js file.

Webpack 2 introduces native support for ES6 modules. As such, I've followed the recommendations found in What's new in webpack 2 and replaced my es2015 babel preset with es2015-webpack in my .babelrc file. This prevents babel from transpiling ES6 imports/exports, allowing Webpack to handle them instead.

Unfortunately, this causes the webpack command to throw SyntaxError: Unexpected token import. This makes intuitive sense; Webpack doesn't process its own config file, and babel hasn't been asked to transpile import/export statements, so node gets passed a file with import and errors.

The obvious workaround seems to be including the es2015 plugin in .babelrc and then overriding it with es2015-webpack in webpack.config.babel.js. However, this feels a bit hacky. Is this currently considered best practice? Or is there another better solution? (I'm assuming that the babel config defined in .babelrc will be merged with the babel config defined in webpack.config.babel.js, with the latter overriding the former. However, I haven't confirmed that. Is this actually the case?)

Also, it took quite a bit of head-scratching to realize what exactly was happening here. It would be great if the solution to using ES6 modules in webpack.config.babel.js was documented somewhere. I'm more than happy to write that documentation if that would be helpful.

Thanks for such an incredible tool!

_Copied from original issue: webpack/webpack#2806_

[pksjce]

_From @sokra on July 26, 2016 23:35_

A structure like this could help if your web source code is in an app folder.

+- .babelrc
+- webpack.config.babel.js
+-+ app
  +- .babelrc
  +- ...

[pksjce]

_From @mover96 on July 27, 2016 1:0_

Isn't this more of node's issue for not support ES6 yet, than a webpack issue? Just use require in your webpack config unless you want to transpile just that file with babel beforehand. But once node supports ES6 it will be fine.

[dreyks]

You should also migrate the solution provided by @hung-phan here because the .babelrc method does not work if there's a need to access the code outside webpack. Tests and linters for example

[SpaceK33z]

Note that it's now possible to use babel-preset-es2015 with the modules part disabled:

presets: [
  ["es2015", { "modules": false }]
]

You'd still need to have two .babelrc files, but at least not two packages :).

[skipjack]

I've definitely run into this too. For now I just use const package = require('package') in my webpack configs instead of import but it would be nice to have this just baked into node. I've tracked a few threads relating to that and it doesn't sound like that's coming in the short term unfortunately. Maybe just adding a small section to this page would do the job?

It seems like the consensus is two .babelrcs is the recommended approach... @telekid have you used this setup? Would you still be interested in adding that documentation?