Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use Webpack to output es6?

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?

like image 580
Socrates Avatar asked Apr 27 '18 08:04

Socrates


People also ask

Does webpack support ES6?

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.

What is the output of webpack?

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.

Can we use webpack without Babel?

No unless all dependencies of your project supports ES6. There is one serious incompatibility: import is asynchronous while require() is synchronous.

Does webpack use CommonJS?

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.


2 Answers

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

like image 175
Wis Avatar answered Oct 19 '22 12:10

Wis


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

like image 3
lukas-reineke Avatar answered Oct 19 '22 11:10

lukas-reineke