Hackernoon logoHow to Use ES6 with Webpack by@vzdrizhni

How to Use ES6 with Webpack

This article is for those who use ES6 syntax along with Webpack. It's all about loaders and how to deal with it. If you use ESlint, you will have to use babel-eslint instead of ES6. I hope you found this guide useful and if you have any questions, please let me know in the comments below. If I knew it before it could have saved a lot of time for me. If you are able to use class fields, then you will need to use "ESlint" or "Classes"
image
Roman Hacker Noon profile picture

Roman

Freelance full-stack developer

This article is for those who use ES6 syntax along with Webpack. After I started using Javascript with Webpack I met a lot of unexpected errors. All of them were because of ES6 syntax usage. Those of you who decided to start javascript using "Classes" or you need to use ESlint I'll try to explain how to save some time. In short, it's all about loaders.

Class fields or class properties.

A quite useful feature, isn't it? But the problem is that Webpack doesn't know how to deal with it. Let's look at the example.

image

The result variable is the class field. After trying to build we get the error.

image

Now you need to install "babel-loader".

Use

npm install -D babel-loader @babel/core @babel/preset-env webpack
.

After the installation process, you need to add this piece of code into you

rules
section of a
webpack.config.js 
file
.

{
            test: /\.m?js$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env',
                    {
                        plugins: ['@babel/plugin-proposal-class-properties'],
                    },
                ],
            },
        }

And the whole file should look similar to this.

image

That's it. Now you are able to use class fields.

Case 2 - "ESlint"

If you use ESlint along with some of the ES6 syntax, then you will have to use babel-eslint.

First, add this command:

npm install eslint babel-eslint --save-dev

Then put this

module.exports = {
  parser: "babel-eslint",
};

into your .eslintrc.js file.

That's it! If I knew it before it could have saved a lot of time for me. I hope you found this guide useful. If you have any questions, please let me know in the comments below!

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.