Written in the beginning

  • 10During the interview in January, an interviewer was talking to meWebpackI mentioned it when I talked about itLoader“And asked if he had implemented any of them himselfLoader. From the useWebpackEach project starts with a lot of configurationLoaderWe all know thatLoaderThe function is to process some resource files. For example,sass-loaderIs tosassFile compiled intocssFiles, so the browser can recognize them, andfile-loaderIs to deal with different file resources, such as images, fonts, and so on.
  • So many differentLoader, whether to write aLoaderIs it difficult? I wonder if we can make one of our ownLoader? Just do it.

To understandLoader

Single responsibility

  • eachLoaderBoth do one thing, and when multiple transformations are required, multiple transformations are requiredLoader, e.g.sassFile conversion is neededsass-loader,css-loader 及 style-loader;
// webpack.config.js module Configuration module: {rules: [{test: /\.sass$/, use: ['style-loader',{loader: 'css-loader', options: {...} }, { loader: 'sass-loader', options: {...} }] }, ... ] }Copy the code

Call to order

  • We can see from the above example that transformationsassThe file needs threeLoaderBut we are writingLoaderPay attention to the order in which you write,LoaderThe order of execution is fromuseFrom the end of the arraysass-loader 到 css-loaderAnd then tostyle-loader)

Chain calls

  • Now that the parsingsassThe file will use threeLoaderSo the next oneLoaderThe accepted value is the previous oneLoaderThe processed value, executed firstLoaderThe acceptance istestMatching the source file, the whole thing is a chain call process, similar tojQuery.

modular

  • Because we are innodeTo be used in the environmentLoaderSo ourLoaderModular design principles should also be used.

stateless

  • Between multiple module conversions, we should not be inLoaderIs in the reserved state. eachLoaderThe runtime should be kept separate from other compiled modules, as well as from the previous onesLoaderCompile results for the same module are kept independent.

in-depthloader

utility

  1. loader-utils: provides many useful tools that the careful reader should have noticed inLoaderThere is one in the configuration ofoptionsObject, and the value of this object can pass throughloader-utilsIn the packagegetOptionsTo obtain.
  2. schema-utils: you can useschema-utilsProvided tools to obtain for validationoptions 的 JSON Schema Constant to verifyloader options.
import { getOptions } from 'loader-utils'; import { validateOptions } from 'schema-utils'; const optionSchema = { type: object, properties: { test: { type: string } } } export default function(source) { const options = getOptions(this); validateOptions(optionSchema, options, 'Example Loader'); // Write the logic to convert source... source = source return `export default ${ JSON.stringify(source) }`; };Copy the code

Other results return

  • If we want to add additional content to the result, we can add it through this.callback. There are other apis (Loader API). These are injected by Webpack for easy communication with Loader.

  • This. callback A function that can be called synchronously or asynchronously and can return multiple results. The expected parameters are:

this.callback( err: Error | null, content: string | Buffer, sourceMap? : SourceMap, meta? : any );Copy the code

asynchronousLoader

  • In some common cases, your project may need to request some data to process some of your files, for example, if you need to request some dynamic resources to replace some tagged resources, if asynchronous is not suitable, the build will block and increase the build time of the entire project. That’s where we need to use itWebpackThe injectedAPIIn thethis.async. Example:
module.exports = function(source) { var callback = this.async(); , someAsyncOperation(source, function(err, result, sourceMaps, ast) { callback(err, result, sourceMaps, ast); }); }Copy the code

Other features

  • Processing binary
Module. exports = function(source) {// exports.raw === true, Source instanceof Buffer === true; // Loader can also return the type of Buffer // in exports.raw! If == true, the Loader can return a result of type Buffer. }; // The exports.raw property tells Webpack whether the Loader needs binary data module.exports.raw = trueCopy the code
  • Get thetarget
module.exports = function(source) {
	const target = this.target; // 'web', 'node'...
    return source;
};
Copy the code
  • To obtainLoaderConfiguration of theoptions
    • In addition to passing aboveloader-utils getOptionsIn addition to the method,WebpackThe injectedthis.queryYou can also get the correspondingoptions, but if not configuredoptionsifthis.queryIt’s just a?String at the beginning.
  • More built-inAPIPlease asynchronousWebpack Loader APIView official documents.

Development principles

Common code

  • When you have multiple customizationsLoaderIf there are two or moreLoaderIf you use a piece of the same code, you should separate it out to avoid duplication.

Company relies on

  • If you developLoaderSimply pack another bag, then you should be inpackage.jsonSet this package to peer dependency (peerDependency). This lets the application developer know which specific version to specify.
  • For example,sass-loader 将 node-sassDesignated as peer dependency:
"PeerDependencies ": {"node-sass": "^4.10.0"}Copy the code

An absolute path

  • Don’t inLoaderWrite absolute paths in the module, because these paths interfere when the project root path changesWebpackTo calculatehash(themoduleThe path of is converted tomoduleA reference to theid).loader-utilsThere is astringifyRequestMethod, which converts an absolute path to a relative path.

Realize the loader

  • Through the above introduction, we have a good understanding ofLoaderWe have a certain understanding of the following simple implementation of their ownLoader.

The preparatory work

  • In the implementationLoaderTo start, we need to prepare a simple project to test the later implementationLoaderSo I useWebpackA simple project is configured. Note that I added a comment to the file. The configuration is as follows:
  1. Install content
"Clean-webpack-plugin ": "^3.0.0", // html-webpack-plugin": "^4.5.0", // HTML template, used to insert packed JS files, manual import also ok "path": "^ 0.12.7", / / handle file path "webpack - cli" : "^ 4.2.0", / / also need global installation "webpack" : "^ 5.4.0" / / global installation is neededCopy the code
  1. webpack.config.js
// webpack.config.js const webpack = require('webpack'); const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); Module. exports = {entry: './index.js', mode: 'development', // exports = {entry: './index.js', mode: 'development', // Exports = {entry: './index.js', mode: 'development', // Exports: {publicPath: Path: path.resolve(__dirname, 'dist'), filename: }, module: {rules: [{test: /\.js$/, use: {rules: [{test: /\.js$/, use: ['nodeal-loader'] } ] }, resolveLoader: { modules: [ 'node_modules', path.resolve(__dirname, 'loader'),] }, plugins: [ new CleanWebpackPlugin(), new htmlWebpackPlugin({ template: './index.html', inject: "body" }) ] }Copy the code
  1. File directory

  • This directory is I conveniently built, you can build according to their own habits, different directories remember to modify the corresponding configuration can be.

The simplest loader

  • First let’s implement the simplest oneLoader, since do not do any processing, directly get the content back out.
// nodeal-loader.js
module.exports = function(source) {
    return source;
};
Copy the code
  • We execute the package command if the following error occurs:
Module not found: Error: Can't resolve 'nodeal-loader' in 'XXX'Copy the code
  1. You can check what you have written firstLoaderAre the names of the
  2. Look at yourwebpack.config.jsWhether the following configuration is available and whether the road strength is correct
ResolveLoader: {modules: ['node_modules', path.resolve(__dirname, 'loader')]Copy the code
  1. Will you writeLoaderRelease toNpmOn, and then like anything elseLoaderDownload it from the package management tool.Publish your own NPM package
  2. useNpm link

    • Npm link is used to develop and debug local Npm modules. It can link the source code of a local module under development to the node_modules directory of the project without releasing the module, so that the project can directly use the local Npm module.

    • Because it is implemented by soft link, the Npm module code is edited locally, and the edited code can be used in the project.

    • The steps to complete Npm Link are as follows:

      1. Make sure you are developing locallyNpmModule (that is, under developmentLoader)package.jsonThe configuration is correct.
      2. Execute in the root directory of the local Npm modulenpm linkTo register local modules globally.
      3. Execute in the project root directorynpm link loader-nameThe first2Step registration to the global localNpmThe module links to the project’snode_moduelsBelow, among themloader-nameRefers to the first1In the steppackage.jsonThe module name configured in the file.

    • After linking the Loader to the project you can use the local Loader as if it were a real Npm module.

To get rid ofconsole 的 loader

  • whatLoaderWithout doing anything, let’s implement a deletejsIn the fileconsoleMany plug-ins already do this in daily development (for example:uglifyjs-webpack-plugin), this is just an example.
  • Modify theLoaderAs follows:
Module. exports = function(source) {source = source.replace(/console\.log (.*? \); ? /, '') this.callback(null, source) return source; };Copy the code
  • inindex.jsAdd the following code to the
Alert (' test '); console.log('detanx');Copy the code
  • We execute the package command if the following error occurs:

  • Check to see if there areLoaderThe other is added to the configuration ofLoaderThis could be something elseLoaderThe returnedsourceType noreplaceMethod. You can remove other loaders first.
  • Open it in a browserdistThe followinghtmlDocuments, we seealertThe content is already displayed, but nothing is printed on the console, and we haven’t added any other plug-ins orloaderThis proves that what we wroteLoaderTo take effect.

  • Let’s look at the packaged files,alertWas preserved,consoleIt’s removed.

Loaderextension

  • Dispose of the above implementationconsoleIn addition, we can also implement other functions, such as removealert, replace implicit conversions with strict equality or inequality (! =,= =Replace with! = =,= = =), replace the resource link withrequireThe way of introduction and so on.

conclusion

  • For modular,LoaderHave a better understanding of;
  • Resources that require special processing are not readily availableLoaderWe can try to do it ourselves;
  • right WebpackHave a further understanding of the configuration and packaging process;
  • Review how to publishNpmPackage flow.