Webpack for front-end module packaging

Time:2022-5-16

preface

Here is a summary of my doubts when learning webpack

1. What is webpack?

Webpack is a front-end modular packaging tool. It regards everything as a module, such as CSS, JS, picture files, etc., and then processes the resources through some loaders and plugins to package them into front-end resources in line with the production environment.

2. Why webpack?

  • Multi module file dependency increases code reusability

    The traditional introduction of resources is similar to this form and has no modular relationship.

    <body>
        <script type="text/javascript"></script>
        <script type="text/javascript"></script>
        <script type="text/javascript"></script>
    </body>

Introducing modular relationships

// mathUntil.js
function sum(num1, num2) {
      return num1 + num2;
  }
  function mul(num1, num2) {
      return num1 * num2;
  }
  export {
      sum,
      mul
  }
// main.js
//Use
 const {
      sum,
      mul
  } = require("./js/mathUtil.js")
  console.log(sum(10, 20));
  console.log(mul(2, 4));

Webpack for front-end module packaging

Webpack for front-end module packaging

You can also use import

//Take a chestnut
// a.js
export default function (a, b) {
    return a + b;
}

// index.js
import sum from 'a.js';
//Use
console.log(sum(1,2))// 3
  • Packaging expansion language

    In general, CSS preprocessing languages less and SCSS, as well as some syntax (modular import, export, etc.) of ES6 +, cannot be directly run and displayed by the browser, so webpack needs to be packaged into a format consistent with the browser’s recognition and display.

  • Provide some powerful loaders and plugins to reduce the amount of code or facilitate project maintenance

3. Common loaders

  • File loader: output the file to a folder and reference the output file through the relative URL in the code
  • URL loader: similar to file loader, but it can inject the file content into the code in the way of Base64 when the file is very small
  • Source Map Loader: load additional source map files to facilitate breakpoint debugging
  • Image loader: loads and compresses image files
  • Babel loader: convert ES6 to Es5
  • CSS loader: loads CSS and supports modularization, compression, file import and other features
  • Style loader: inject CSS code into JavaScript and load CSS through DOM operation.
  • Eslint loader: check JavaScript code through eslint

4. Common plugin

  • Define plugin: define environment variables
  • Commons chunk plugin: extract common code
  • Uglifyjs webpack plugin: compress ES6 code through uglifyes

5. Construction process of webpack

Before you understand the construction process of webpack, you have to understand it first

Entry entry starting point

Chunk can be understood as a code block formed by merging multiple modules

  • Initialization parameters: read and merge parameters from configuration files and shell statements to get the final parameters;
  • Start compilation: initialize the compiler object with the parameters obtained in the previous step, load all configured plug-ins, and execute the run method of the object to start compilation;
  • Determine entry: find all entry files according to the entry in the configuration;
  • Compiling module: starting from the entry file, call all configured loaders to translate the module, find out the module that the module depends on, and then recurse this step until all the entry dependent files have been processed in this step;
  • Complete module compilation: after translating all modules with loader in step 4, the final translated content of each module and the dependencies between them are obtained;
  • Output resources: according to the dependency between entries and modules, assemble chunks containing multiple modules, and then convert each chunk into a separate file to be added to the output list. This step is the last chance to modify the output content;
  • Output completion: after determining the output content, determine the output path and file name according to the configuration, and write the file content to the file system.

Recommended Today

Goodbye, spring security OAuth!!

Official promotion of new products Recently, spring officially launched《Spring Authorization Server》Project: This time《Spring Authorization Server》The project was officially launched, removing the previous experience status, which coincided with the release of version 0.2.0, which is also the first production ready version officially supported. Project predecessor First, let’s take a look at the description of the 2019 […]