6.1.3: Webpack with Babel

Search…
Loaders
We use loaders to get webpack to handle files other than Javascript files. They pre-process/ transform these other files into valid Javascript code. Both Babel makes use of one such loader. More information on loaders here.
Introduction
Another powerful feature of Webpack is to transform JS code according to a set of rules. In this module we will be using Babel to transform JS from ES6 to ES5 syntax. This enables us to write JS using the latest ES6 syntax, but deploy our code in the more widely-compatible ES5 syntax.
We will continue using the repo we created and used previously in section 6.1.1: Webpack with Local Modules and 6.1.2: Webpack with NPM modules.
Adding Babel to our project
Install the npm packages babel-loader, @babel/core, @babel/preset-env
@babel/core: core Babel functionality
@babel/preset-env: Determines how much transpiling of our code needs to be done based on other packages that it uses (e.g, compat-table, browserslist etc), i.e, how far back we need to go.
npm install --save-dev babel-loader @babel/core @babel/preset-env
Add the module object to webpack.config.js (lines 14 - 28). What we're doing is telling webpack that we want to look for all the files that end with .js (line 17), excluding node modules (line 18), and we want to use babel-loader to process those files (line 21).
// webpack.config.js
​
const path = require('path');
​
module.exports = {
  mode: 'development',
  devtool: false,
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // loaders
  module: {
    rules: [
      {
        test: /\.js$/, // this is regex, it tells webpack to look for all files which end in .js
        exclude: /node_modules/,
        use: {
          // this will automatically reference a .babelrc file
          loader: 'babel-loader',
        },
      },
    ],
  },
};
babel-loader will automatically reference a .babelrc file Add a .babelrc file to our project directory. .babelrc tells babel-loader which preset to use, which in our case is @babel/preset-env.
preset: a set of plugins used to support particular language features.
{
  "presets": ["@babel/preset-env"]
}
Add the following code to ./src/index.js
// the spread operator is a newer feature that is not compatible with older versions of certain browsers
​
const obj = {
  a: 'apple',
  b: 'buffalo',
};
​
const newObj = { ...obj, c: 'cheetah' };
console.log('new obj', newObj);
Lines 1157 - 1192 show us what Babel did to transpile our code.
Browserslist
Browserslist is used by is a package used by @babel/preset-env . Browserlist a manages list of browsers and what code versions they support.
We are able to specify which browsers to target if we do not wish to use defaults by creating a .browserslistrc file. The code that Babel produces will be supported by this set of browsers. Learn more about browserslist here.​
// .browserslistrc
last 2 versions     // of each browser
> 0.5%     // of browsers versions selected by global usage statistics
not dead     // browsers with official support or updates in the last 24 months
Babel polyfills (core-js)
In cases where we want to use a feature that we know is not supported the browser, we can use polyfills. For example, we know that arrow functions are not supported by some older browsers.
Install core-js
npm install core-js
Create a file called arrowFunction.js in the src folder.
// arrowFunction.js
​
export const arrow = () => {
  return 'arrow function example';
};
Import arrow and what we want from core-js into our /src/index.js file (our entry point) which in this case is the feature called function(lines 6 and 7). We are also able to import the entire core-js but it is not practical as it would take up too much space.
// index.js
​
import { cat } from './cat.js';
import { mouse } from './mouse.js';
import catNames from 'cat-names';
import 'core-js/es/function';
import { arrow } from './arrowFunction.js';
​
const obj = {
  a: 'apple',
  b: 'buffalo',
};
​
const newObj = { ...obj, c: 'cheetah' };
console.log('new obj', newObj);
​
const result = arrow();
console.log('result', result);
​
console.log(catNames.random());
console.log('cat', cat);
console.log('mouse', mouse);
Try commenting out line 6 and running webpack again. Notice the difference in file size of /dist/main.js.
6.1.2: Webpack with NPM Modules
6.1.4: Webpack with CSS, SASS
Last modified 3mo ago
Copy link
Outline
Loaders
Introduction
Adding Babel to our project
Browserslist
Babel polyfills (core-js)