From the course: Learning webpack 4

Set up babel-loader for a React or ES6 project

From the course: Learning webpack 4

Start my 1-month free trial Buy for my team

Set up babel-loader for a React or ES6 project

“

- [Instructor] To set up the babel-loader, we'll need to take a few steps. Let's go to our terminal and we're going to, install babel-loader and also @babel/core and we're going to save these to our dev dependencies. Babel-loader is the loader, babel/core is the actual babel package that handles the transformations. And both are going to be added to our package json. Next we're going to need to adjust the webpack.config. We're going to add another key here called module and we're going to add another called rules. The next thing we want to do here is add an object and we're going to add a test key. Now this test key is going to say that whenever a JavaScript file is found, babel should transpile it. We can also define an optional key for exclude and this is just going to say don't run babel on the node modules folder 'cause that will take a long time. And finally we're going to add another object here called use and we're going to say that this should use the babel-loader. Perfect. So let's go ahead and run our build command which will run webpack and even though it looks like some transpiling has occurred, nothing is really happening yet. This is actually what we should expect at this point because we need to add one other step to this. We need to define some rules around what should be transformed here. So, we're going to make some additional changes to handle these transformations.

Contents