This is the sixth day of my participation in Gwen Challenge

preface

Here is a summary of their own learning webpack, more confused place

1. What is Webpack?

Webpack is a front-end modular packaging tool, it regards everything as modules, such as CSS, JS, image files, etc., can be regarded as modules, and then through some loader (loader) and plugin (plug-in) to process resources, packaged into front-end resources in line with the production environment.

2、为什么需要webpack?

  • Multi – module file dependency, increase code reuse

    Traditional imported resources are similar in form without modularity.

    <body>
    <script type="text/javascript" src="a.js"></script>
    <script type="text/javascript" src="b.js"></script>
    <script type="text/javascript" src="c.js"></script>
</body>
Copy the code

    Introducing modularity relationships

    // mathUntil.js
function sum(num1, num2) {
      return num1 + num2;
  }
  function mul(num1, num2) {
      return num1 * num2;
  }
  export {
      sum,
      mul
  }
Copy the code
     
// main.js
/ / use
 const {
      sum,
      mul
  } = require("./js/mathUtil.js")
  console.log(sum(10.20));
  console.log(mul(2.4));
Copy the code

You can also use import

// a.js export default function (a, b) {return a + b; } // index.js import sum from 'a.js'; Log (sum(1,2))// 3Copy the code

  • Package extension language

    Under normal circumstances, CSS preprocessing languages Less, Scss, as well as some ES6+ syntax (modular import, export, etc.), the browser can not directly run and display processing, so it needs webpack to meet the browser recognition display format.

  • Provide some powerful loader (loader), plugin (plug-in), reduce the amount of code or facilitate project maintenance

3. Common Loader

  • File-loader: Outputs files to a folder, referencing the output file with a relative URL in the code
  • Url-loader: similar to file-loader, but can inject the contents of files into code base64 if the files are too small
  • Source-map-loader: Loads additional source map files to facilitate breakpoint debugging
  • Image-loader: loads and compresses image files
  • Babel-loader: Convert ES6 to ES5
  • Css-loader: loads the CSS and supports features such as modularization, compression, and file import
  • Style-loader: Inserts CSS code into JavaScript and loads CSS via DOM manipulation.
  • Eslint-loader: Checks JavaScript code through ESLint

4. Common Plugin

  • Define-plugin: Defines environment variables
  • Commons-chunk-plugin: Extract common code
  • Uglifyjs-webpack-plugin: Compress ES6 code with UglifyES

5. Webpack construction process

Before you understand the WebPack build process, take a look

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 compiling: initialize the Compiler object using the parameters obtained in the previous step, load all the configured plug-ins, and execute the object’s run method to start compiling.
  • Determine entry: find all entry files according to the entry in the configuration;
  • Module compilation: Starting from the entry file, call all configured Loader 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 gone through this step;
  • Complete module compilation: After using Loader to translate all modules in step 4, obtain the final content of each module after translation and the dependencies between them;
  • Output resources: assemble chunks containing multiple modules one by one according to the dependency between the entry and modules, and then convert each Chunk into a separate file and add it to the output list. This step is the last chance to modify the output content.
  • Output complete: After determining the output content, determine the output path and file name based on the configuration, and write the file content to the file system.