Webpack Framework Knowledge Finishing--loader

4.Loader

The 4.1 loader is used to convert the module's source code, allowing you to import preprocess the file when or "Load" the module:

1 You can convert files from different languages (such as TypeScript) to the JavaScript language;

2 or convert the inline image to the data URL.

Therefore, loader can be said to provide us with a powerful way to handle front-end building steps.

Second, you need to load the corresponding converter (that is, loader) before using loader, and then Webpack will load the files that can be processed based on the configuration, such as when you encounter each .css时 use css-loader and when you encounter all the .ts files ts-loader等 .

There are roughly three ways to use 4.2 loader:

• • Configuration: Specify loader in the Webpack.config.js file, which is the recommended method.
  • Inline: import explicitly specify loader in each statement. Such asimport Styles from ‘style-loader!css-loader?modules!./styles.css‘;中间的“！”是用于分隔开各个loader
  • CLI: Specify them in the shell command. Such aswebpack --module-bind jade-loader --module-bind ‘css=style-loader!css-loader‘，这里对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader

Characteristics of 4.3 loader

• • Loader is able to chain-pass the Resource Usage pipeline (pipeline). That is, the compilation order of a set of chained loader is sequential, and the previous loader in the chain returns the value to the next loader. When passed to the last loader, the JavaScript is returned.
  • The loader can be synchronous/asynchronous.
  • Loader is running in node. JS and is capable of performing any possible operations.
  • The loader receives the query parameters that are used for the loader delivery configuration.
  • Loader can be options configured with objects.
  • You can use package.json common main attributes, or you can package.json define a field in which to loader export a common NPM module to loader.
  • Using plug-ins (plugin) can bring more features to loader.
  • Loader can generate arbitrary files for non-standard configuration files.

(loader) Preprocessing functions provide more possibilities and changes for the JavaScript ecosystem. Users have more flexibility in introducing fine-grained logic, such as compression, packaging, language translation, and more.

Analysis of 4.4 Loader

Following the standard module parsing, loader will parse from the module path (which is usually considered a module path npm install node_modules ).

The loader module needs to be exported as a function and written using node. JS-compatible JavaScript. It is usually managed with NPM, or you can use a custom loader as a file in your application.

Naming convention: Loader is named xxx-loader (for example json-loader ).

For more information, see How to write loader?

Webpack Framework Knowledge Finishing--loader