Knowledge review:

In the previous section, we learned how to use URL-loader to load and package image files. Url-loader converts image files into Base64 encoding through the Data URLs protocol and embed them into JS code. It can also be used to process HTML files and deal with different encoding formats for different files. You can also use the option attribute limit to specify the file size to choose whether to use url-loader or file-loader. To use this method, you need to install file-loader.

Common loader classification

  • Compile conversion classes, such as CSS-Loader
  • File operations, such as file-loader
  • Code checking classes, such as ESlint-Loader, are designed to unify code styles and improve code quality

babel-loader

Using WebPack packaging does not convert the ES6 feature code in our code to the more compatible ES5. It handles import and export because module packaging is required, but WebPack only handles import and export.

If you want to convert ES6 code, you can use babel-Loader, and since babel-Loader relies on Babel’s core module, you also need to install @babel/core, and a set of plug-ins for the specific feature conversion @babel/preset-env

After installation, configure the loader of the js file as babel-loader in the webpack.config.js file

Loader is specified as babel-loader, only loader is not enough, because babel-loader is only a platform for converting JS code, and the conversion is based on @babel/preset-env.

Note that the value of the presets attribute is an array, because babel-Loader can also use other plug-ins to convert code for other features