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', ...
