Is there a way to use Webpack to bundle all the JavaScript files and output the resulting bundle.js as an es6 file, and not to es5? So, it is Webpack's job to bundle, but is it actually Webpack's job to convert to es6? Or is that the job of some Webpack loader? Or would I have to use babel for that?
This section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you can pick from a variety of module syntax styles including ES6, CommonJS, and AMD.
Configuring the output configuration options tells webpack how to write the compiled files to disk. Note that, while there can be multiple entry points, only one output configuration is specified.
No unless all dependencies of your project supports ES6. There is one serious incompatibility: import is asynchronous while require() is synchronous.
As you may know, webpack supports a couple of module types out of the box, including both CommonJS and ES modules. Webpack also works on both client- and server-side JavaScript, so with webpack, we can also easily handle assets and resources like images, fonts, stylesheets, and so on.
webpack 5 can generate both ES5 and ES6/ES2015 code.
The default configuration will generate ES2015. If you need to support older browsers (like IE11), you can set output.ecmaVersion: 5
.
https://webpack.js.org/migrate/5/#turn-off-es2015-syntax-in-runtime-code-if-necessary
Webpack still can't do this. There is an open ticket here https://github.com/webpack/webpack/issues/2933
For now, if you want to bundle es6 the most promising solution seems to be rollup
This article is also linked in the discussion on GitHub and provides a pretty good overview
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With