Webpack is a mechanism for packaging modules that simply convert dependent modules into static files that represent those packages. It’s not a modular specification like CommonJS or AMD. Webpack is all about identifying your entry files, identifying your module dependencies, and packaging your code. Whether your code is using CommonJS or AMD or ES6 imports, WebPack analyzes them to get the code’s dependencies. What WebPack does is analyze code, transform code, compile code, and output code. Webpack is a node module, so webpack.config.js is written in CommonJS (modularity in Node is the CommonJS specification).

Each module in webpack has a unique ID, increasing from 0. The entire bundled bundle.js is an anonymous function that executes itself. The argument is an array. Each entry in the array is a function. The contents of function are the contents of each module, in order of require.

// webpack.config.js
module.exports = {
  entry:'./a.js'.output: {filename:'bundle.js'}};Copy the code
// a.js
var b = require('./b.js');

console.log('a');

b.b1();
Copy the code
// b.js
exports.b1 = function () {
  console.log('b1')};exports.b2 = function () {
  console.log('b2')};Copy the code
// bundle.js
(function(modules) { // webpackBootstrap
   // The module cache
   var installedModules = {};

   // The require function
  function __webpack_require__(moduleId) {
       // Check if module is in cache
       if(installedModules[moduleId])
           return installedModules[moduleId].exports;
       // Create a new module (and put it into the cache)
       var module = installedModules[moduleId] = {
          exports: {},
          id: moduleId,
          loaded: false
       };

     // Execute the module function
      modules[moduleId].call(module.exports, module.module.exports,__webpack_require__);

      // Flag the module as loaded
     module.loaded = true;

      // Return the exports of the module
      return module.exports;
   }


  // expose the modules object (__webpack_modules__)
   __webpack_require__.m = modules;

   // expose the module cache
  __webpack_require__.c = installedModules;

  // __webpack_public_path__
   __webpack_require__.p = "";
   // Load entry module and return exports
  return __webpack_require__(0);
 })
 
([
/* 0 */
 function(module.exports, __webpack_require__) {
    var b = __webpack_require__(1);
    console.log('a');
    b.b1();
},

/ * 1 * /
 function(module.exports) {

    exports.b1 = function () {
      console.log('b1')};exports.b2 = function () {
      console.log('b2')}; }]);Copy the code

_webpack_require is a module loading function that accepts the module id (each module in webpack has a unique id, which is actually the index value in the IIFE pass parameter group (0,1,2…..). A depends on B, so call the webpack loading module function in A

Why can WebPack treat any form of resource as a module? Loader mechanism. Different resources are converted by different Loaders. CMD, AMD, import, CSS, etc have corresponding loaders to convert. That why we usually write es6 module mechanism, do not need to add import loader? Because we used Babel to convert import to require. And Webpack 2 will add native support for ES6 modules and mix ES6, AMD, and CommonJS modules. This means that Webpack can now recognize import and export without first converting them to the CommonJS module format: Webpack implements the ES module, which is also based on its own implementation of Webpack_require and WebPack_exports, in a form similar to CommonJS. The ES6 Module is a static dependency, so the code is converted before it runs. The implementation here takes all exported items as properties of an object, and loads the module recursively when the entry file executes.

Webpack2 is how to implement the webpack modularity principle of ES6 modules -ES Module

How to implement a simple Webpack

  1. Read file analysis module dependencies
  2. Parsing execution of the module (deep traversal)
  3. Use corresponding Loaders for different modules
  4. Compile the module to generate an abstract syntax tree AST.
  5. Loop through AST tree, concatenate output JS. How to implement a simple Webpack

Loader principle

The loaderLoader that automatically invokes the response to a file parsing is essentially a function that takes a string as its input argument and a string as its output argument. Of course, the output parameters are treated as JS code, which is parsed by Esprima into the AST, triggering further dependency resolution. Webpack executes the Loader from right to left. Webpack – Confusing place

Cli.vuejs.org/zh/config/#… Blog.csdn.net/u014440483/…