Quick Start Webpack Packaging Guide: Use simple steps to master the skills of using Webpack

The packaging process of Webpack can be summarized as the following steps:

• 1. Entry point configuration: In the Webpack configuration file, we need to specify one or more entry points, which are the starting point of our application, and Webpack will analyze and build dependencies from these entry points.
• 2. Module resolution: Webpack will recursively resolve all modules according to the dependency graph of the entry point. During the parsing process, Webpack will identify and process different types of modules, such as JavaScript, CSS, images, etc., according to the rules in the configuration file.
• 3. Loader processing: For non-JavaScript type modules, Webpack will use the loader (loader) for processing. The loader can convert these modules into JavaScript code, or convert them into other types of static resource files. Loaders can be chained in order to perform multiple transformation operations.
• 4. Dependency graph construction: After the module parsing and loader processing are completed, Webpack will build a dependency graph (dependency graph) according to the dependencies between modules. This dependency graph describes the reference relationships between modules, and their dependencies.
• 5 Packaging output: Finally, Webpack will generate one or more packaging output files according to the dependency graph. These output files can be JavaScript code, CSS style sheets, images, etc. Webpack can also perform additional processing through plugins, such as code compression, file merging, and more. 

• concept:

  webpack is a module packager for JavaScript applications. It can treat all resources in development (pictures, js files, css files, etc.) as modules, process resources through loader (loader) and plugins (plug-ins), and package them into Front-end resources in line with production environment deployment. All resources are rendered via JavaScript. If a page is mostly composed of script tags, more than 80% are packaged by webpack.

  Address: http://cls.cn/telegraph
  

  1. Introduction to webpack packaging

  
  

  1.0 Multiple JS files are packaged:

  If there are many modules, the modules will be packaged into JS files, and then a global variable will be definedwindow[“webpackJsonp”] =[ ] , its function is to store the modules that need to be imported dynamically, and then rewrite window[“webpackJsonp”] array of push( ) methodfor webpackJsonpCallback(), that is to saywindow[“webpackJsonp”].push( ) In fact, the implementation iswebpackJsonpCallback( ) window[“webpackJsonp”].push( )Receive three parameters, the first parameter is the ID of the module, the second parameter is an array or object, which defines a large number of functions, and the third parameter is the function to be called (optional)
  

  1.1 webpack array form

• Package the modules that need to process business, and get the value by subscript.

• !function(e) {
        
        
  var t = {
        
        };
  // 加载器 所有的模块都是从这个函数加载 执行
  function n(r) {
        
        
  if (t[r])
  return t[r].exports;
  var o = t[r] = {
        
        
  i: r,
  l: !1,
  exports: {
        
        }
  };
  1.2 webpack 对象形式
  给需要处理业务的模块进行打包，通过 key 取值。
  return e[r].call(o.exports, o, o.exports, n),
  o.l = !0,
  o.exports
  }
  n(0)
  }
  ([
  function () {
        
        
  console.log('123456')
  },
  function () {
        
        
  console.log('模块2')
  },
  ])
  

  1.2 webpack object form

• Package the modules that need to process business, and get the value by key

• !function(e) {
        
        
  var t = {
        
        };
  // 所有的模块 都是从这个加载器 执行的 分发器
  function n(r) {
        
        
  if (t[r])
  return t[r].exports;
  var o = t[r] = {
        
        
  i: r,
  l: !1,
  exports: {
        
        }
  };
  return e[r].call(o.exports, o, o.exports, n),
  o.l = !0,
  o.exports
  }
  n('xialuo') // 对象 根据KEY 找模块
  }({
        
        
  0: function () {
        
        
  console.log('我是模块1 负责加密')
  },
  'xialuo': function () {
        
        
  console.log('我是模块2 负责解密')
  },
  2: function () {
        
        
  console.log('我是模块3 负责爬数据')
  }
  }
  );
  

  Summarize

  In general, the packaging process of Webpack is a process of merging multiple modules into one or more static resource files. By configuring Webpack's entry points, loaders, and plugins reasonably, we can achieve code modularization, resource optimization, and performance improvement.