What is a webpack

Webpack is a static module packaging tool for today’s javascript applications.

When WebPack processes an application, it internally builds a dependency diagram that maps to each module required for the project and generates one or more bundles.

Differences between loader and plugin

Loader preprocessor function used to convert certain types of modules

The plugin is designed to do other things that loader cannot do for a wider range of tasks. Including: package optimization, resource management, injection of environment variables.

Using the Loader

  1. Configuration (recommended) : Specify loader in webpack.config.js (note: Loader is evaluated/executed from right to left (or bottom to top))
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
  1. Inline: Specify loader explicitly in each import statement
  • Use! Prefix to disable all configured Normal Loaders
import Styles from '! style-loader! css-loader? modules! ./styles.css';Copy the code
  • !!!!! Prefix to disable all configured loaders (preLoader, loader, postLoader)
import Styles from '!! style-loader! css-loader? modules! ./styles.css';Copy the code
  • -! Prefix, disables all preloaders and loaders configured, but disables postLoaders
import Styles from '-! style-loader! css-loader? modules! ./styles.css';Copy the code

Use module.rules whenever possible, as this reduces the amount of boilerplate code in the source code and makes debugging and locating loader problems faster when errors occur.

  1. Cli: Specify them in shell commands
webpack --module-bind pug-loader --module-bind 'css=style-loader! css-loader'Copy the code

Use pug-loader for.jade files and style-loader and CSS-loader for.css files

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. The first loader in the chain passes its results (that is, applied resources) to the next loader, and so on. Finally, the last loader in the chain returns the JavaScript that WebPack expects.
  • The Loader can be synchronous or asynchronous.
  • Loader runs in Node.js and can perform any operation.
  • Loaders can be configured using the Options object (options are still supported using the Query argument, but this approach has been deprecated).
  • In addition to the usual way of exporting an NPM module as a Loader through package.json’s main, you can also reference a module directly in module.rules using the Loader field.
  • Plugins can bring more features to the Loader.
  • Loader can generate additional arbitrary files.

Module resolution rules in Webpack

With enhanced- Resolve, WebPack can resolve three file paths:

  • An absolute path
import '/home/me/file';
import 'C:\\Users\\me\\file';
Copy the code

Since you already have the absolute path to the file, no further parsing is required.

  • Relative paths
import '.. /src/file1'; import './file2';Copy the code

In this case, the directory in which the resource files that use import or require reside is considered a context directory. The relative path given in import/require is concatenated to generate the module’s absolute path.

  • Module path (key)
import 'module';
import 'module/lib/file';
Copy the code

Retrieves modules from all directories specified in resolve.modules. You can replace the initial module path with the resolve.alias configuration option by configuring the alias.

If package contains package.json files, the fields specified in the resolve.exportsFields configuration option will be looked up in turn, The first field in package.json determines which exports are available in the package according to the Package export guide. Once the path has been resolved according to the rules above, resolver will check whether the path points to a file or folder.

  1. Point to file:
    • If the file has an extension, it is packaged directly.
    • Otherwise, will be usedresolve.extensionsOption is parsed as a file extension, which tells the parser which extensions (e.g..js,.jsx) can be accepted in the parse.
  2. If you point to a folder, do the following to find the file with the correct extension:
    • If the folder containspackage.jsonFile, will be based onresolve.mainFieldsThe fields in the configuration are searched in order and based onpackage.jsonTo determine the file path.
    • If it doesn’t existpackage.jsonFile orresolve.mainFieldsIf no valid path is returned, theresolve.mainFilesThe configuration option specifies the filename order to look up to see if it can be found inimport/requireIs matched to an existing file name.
    • Then use theresolve.extensionsOption to resolve file extensions in a similar manner.

What is module hot replacement

The HMR-Hot Module replacement function replaces, adds, or removes modules while the application is running without reloading the entire page.

Significantly speed up development in the following ways:

  • Preserve application state that is lost during a full page reload.
  • Update only the changes to save valuable development time.
  • When CSS/JS changes are made in the source code, they are immediately updated in the browser, which is almost equivalent to changing styles directly in the browser DevTools.