This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

Loader is introduced

Since Webpack can only recognize and analyze JavaScript and JSON files, we need to expand the functions of Webpack when facing other types of files, and Loader can enable WebPack to process other types of files and convert them into valid modules. Available for use by applications and added to dependency diagrams.

One of the most powerful features of WebPack is the ability to import any type of module (such as.css files) that may not be supported by other packagers or task executors. We think this language extension is necessary because it allows developers to create more accurate dependency diagrams.

In the webpack configuration file we can configure the loader that we need to process for a certain type of file in the following way

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',},module: {
    rules: [{ test: /.txt$/, use: 'raw-loader'}],}};Copy the code

The rules of the Modul. Export module in the above code define the files we need to process and the corresponding loader. If we had configured this code, Webpack would have preprocessed the source files by Loader when it found the require and import references to TXT files.

Module. rules allows us to specify multiple loaders in a Webpack configuration. This approach is a concise way to present the Loader and helps keep the code concise and maintainable. It also gives you a global overview of each loader:

Loader to perform

The loader evaluates/executes from right to left (or bottom to top). In the following example, execution starts with Sas-loader, continues with CSS-loader, and ends with style-loader.

module.exports = {
  module: {
    rules: [{test: /.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader'.options: {
              modules: true}},// [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader'}]}};Copy the code

The characteristics of the loader

  • Loader supports chained invocation. Each loader in the chain applies the transformation to the processed resource. A set of chained Loaders will execute in reverse order (that is, from bottom up in the Config definition). The first loader in the chain passes its result (that is, the applied resource) to the next loaderloaderAnd so on. And finally, the last one in the chainloaderTo return towebpackThe desiredJavaScript.
  • The Loader can be synchronous or asynchronous.
  • Loader runs in Node.js and can perform any operation.
  • We should not keep state in the Loader between module transitions. Each loader runtime should be independent of other compiled modules and should also be independent of previous loaders’ compilations of the same module.
  • If we use external resources in the Loader, we must declare information about these external resources. This information is used to validate a cacheable Loader in monitor mode and to recompile.
  • Except for the usual passpackage.json 的 mainTo export an NPM module as a loader, which can also be used in module.rulesloaderField refers directly to a module.
  • Plugins can bring more features to the Loader.
  • Loader can generate additional arbitrary files.

The commonly used loader

  • CommonsChunkPlugin is built into Webpack to improve packaging efficiency and separate packaging of third-party libraries and business code.
  • DefinePlugin configates global variables at compile time, which is useful for development mode and publish mode builds to allow different behavior.
  • HotModuleReplacementPlugin hot update
  • Styles handle less-loader, sas-loader
  • Framework code handling: babel-loader, babel-preset- ES2015, babel-preset-react