Loaders are transformation programs that run on the source files individually. For example, you'd use loaders to transform CoffeeScript/TypeScript into ES5 before bundling them; in our case, we use it to transform ES2015+ syntax and JSX into ES5. First, let's install the loader using yarn.

$ yarn add babel-loader --dev

Next, we will update webpack.config.js to instruct Webpack to use the loader. We can do this by defining loader specifications inside the module.rules property.

const webpack = require('webpack');module.exports = {  entry: { app: './src/index.jsx' },  output: { filename: 'bundle.js' },  module: {    rules: [{      test: /\.jsx?$/,      exclude: /node_modules/,      use: [{        loader: 'babel-loader',        options: { presets: ['@babel/preset-env', ...

Get Building Enterprise JavaScript Applications now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.