Front-end engineering

• Stage 1: the way to partition modules based on files
• Phase 2: Each module exposes only one global object to which all module members are mounted
• Stage 3: Provide the module with private space using an immediate-execution function expression

• CommonJS specification (CommonJS loads modules in synchronous mode)
  • A file is a module
  • Each module has a separate scope
  • Exports members through module.exports
  • Load the module via the require function
• Most third-party libraries currently support the AMD specification
  • AMD is relatively complex to use
  • Module JS file requests are frequent
• ES Modules
  • By adding the type = module attribute to a script, you can execute the JS code in the ES Module standard
  • ESM adopts strict mode automatically, ignoring ‘use strict’
  • Each ES Module runs in a separate private scope
  • ESM requests external JS modules through CORS
  • The ESM script tag delays script execution
  • CommonJS modules can be imported into ES Module
    • The CommonJS module always exports only one default member
    • You can’t import ES Modules in CommonJS (node.js, except webPack)
    • (import) Members cannot be extracted directly. Note that import is not a deconstructed export object

- CommonJS module global variable - require // load module function - module object - exports // export object alias - __filename // absolute path of the current file - __dirname // directory of the current file - ESM does not have CommonJS module global member 'import {fileURLPath} from 'url' import {dirname} from 'path' const __filename = fileURLToPah(import.meta.url) const __dirname = dirname(__filename) `Copy the code

• webpack
  • Module Loader
    • Loader is a core feature of Webpack
    • Any type of resource can be loaded with Loader
    • Webpack is just a packaging tool, and the loader can be used to compile the transformation code
  • Code Splitting
  • Asset Module
    • Dynamically import resources based on the needs of the code
    • It’s not the application that needs resources, it’s the code
    • The idea of something new is the breakthrough point
    • Webpack module loading mode
      • Follow the ES Modules standard import declaration
      • Follow the CommonJS standard require function
      • Follow AMD standard define function and require function
      • • The @import directive and URL function in the style code
      • • The SRC attribute of the image tag in HTML code
  • The packaging tool addresses front-end modularity as a whole, not JavaScript modularity alone
  • Core operating Principles
    • Following the code of the entry file (js file in general), according to the statements such as import or require in the code, the resource module that the file depends on is analyzed and inferred, and then the corresponding dependencies of each resource module are analyzed respectively. Finally, a dependency tree between all files used in the whole project is formed. Webpack will recurse this dependency tree, and then find the resource file corresponding to each node. Finally, it will find the loader corresponding to this module according to the rules attribute in the configuration file, and let the loader load this module. Finally, it will put the loaded result into bundle.js, so as to realize the packaging of the whole project
  • Webpack plugin mechanism
    • Enhance WebPack automation capabilities
      • Eg. Clear the dist directory
      • Eg. Copy static files to output directory
      • Eg. Compress the output code
    • Developing a plug-in
      • A function or an object that contains the apply method
      • Extensions are implemented by mounting functions in lifecycle hooks