Detaillierte Erläuterung des Webpack-Moduls und der neuen Funktionen von webpack3

Dieser Artikel beginnt mit einem einfachen Beispiel und analysiert die folgenden drei Fragen aus der Verpackungsdatei: Wie sieht die Webpack-Verpackungsdatei aus? Wie erreicht man die Kompatibilität mit den wichtigsten modularen Lösungen? Welche neuen Funktionen bietet webpack3? Webpack ist ein leistungsstarkes Tool zum Packen von Modulen, das sich hervorragend für den Umgang mit Abhängigkeiten und Modulen eignet. Dieser Artikel beginnt mit der Analyse von bundle.js-Dateien, um die Lademechanismen verschiedener Modullösungen zu untersuchen, Webpack zunächst zu verstehen und die Funktionen von webpack3 näher zu erläutern .

Ein einfaches Beispiel

Webpack-Konfiguration

 // webpack.config.js
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
};

Einfache js-Datei

 // src/index.js
 console.log('hello world');

Webpack-gepackter Code

Wenn Sie hinschauen Sie werden denken, ich habe nur eine Codezeile und Sie packen so viel für mich? ? ? (Schwarzes Fragezeichen)

// dist/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] = {
/******/    i: moduleId,
/******/    l: false,
/******/    exports: {}
/******/   };
/******/
/******/   // Execute the module function
/******/   modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/   // Flag the module as loaded
/******/   module.l = 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;
/******/
/******/  // define getter function for harmony exports
/******/  __webpack_require__.d = function(exports, name, getter) {
/******/   if(!__webpack_require__.o(exports, name)) {
/******/    Object.defineProperty(exports, name, {
/******/     configurable: false,
/******/     enumerable: true,
/******/     get: getter
/******/    });
/******/   }
/******/  };
/******/
/******/  // getDefaultExport function for compatibility with non-harmony modules
/******/  __webpack_require__.n = function(module) {
/******/   var getter = module && module.__esModule ?
/******/    function getDefault() { return module['default']; } :
/******/    function getModuleExports() { return module; };
/******/   __webpack_require__.d(getter, 'a', getter);
/******/   return getter;
/******/  };
/******/
/******/  // Object.prototype.hasOwnProperty.call
/******/  __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/  // __webpack_public_path__
/******/  __webpack_require__.p = "";
/******/
/******/  // Load entry module and return exports
/******/  return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
console.log('hello world');
/***/ })
/******/ ]);

Lassen Sie uns zunächst diesen Teil des Codes analysieren und vereinfachen. Tatsächlich ist das Ganze eine selbstausführende Funktion und übergeben dann ein Modularray

 (function(modules) { 
  //...
 })([function(module, exports) {
  //..
 }])

Okay, was geschieht durch die Übergabe des Modularrays (eigentlich sind die Kommentare sehr offensichtlich, ich habe es nur grob übersetzt) ​​

 /******/ (function(modules) { // webpackBootstrap
/******/  // The module cache 缓存已经load过的模块
/******/  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] = {
/******/    i: moduleId, //模块id
/******/    l: false, // 是否已经加载完毕
/******/    exports: {} // 对外暴露的内容
/******/   };
/******/
/******/   // Execute the module function 传入模块参数，并执行模块
/******/   modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/   // Flag the module as loaded 标记模块已经加载完毕
/******/   module.l = 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;
/******/
/******/  // define getter function for harmony exports 为ES6 exports定义getter
/******/  __webpack_require__.d = function(exports, name, getter) {
/******/   if(!__webpack_require__.o(exports, name)) { // 假如exports本身不含有name这个属性
/******/    Object.defineProperty(exports, name, {
/******/     configurable: false,
/******/     enumerable: true,
/******/     get: getter
/******/    });
/******/   }
/******/  };
/******/
/******/  // getDefaultExport function for compatibility with non-harmony modules 解决ES module和Common js module的冲突，ES则返回module['default']
/******/  __webpack_require__.n = function(module) {
/******/   var getter = module && module.__esModule ?
/******/    function getDefault() { return module['default']; } :
/******/    function getModuleExports() { return module; };
/******/   __webpack_require__.d(getter, 'a', getter);
/******/   return getter;
/******/  };
/******/
/******/  // Object.prototype.hasOwnProperty.call
/******/  __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/  // __webpack_public_path__ webpack配置下的公共路径
/******/  __webpack_require__.p = "";
/******/
/******/  // Load entry module and return exports 最后执行entry模块并且返回它的暴露内容
/******/  return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
console.log('hello world');
/***/ })
/******/ ]);

Was ist der Gesamtprozess?

• Pass Geben Sie das Modularray ein

• Rufen Sie __webpack_require__(__webpack_require__.s = 0)

auf, um das Modulobjekt zu erstellen und legen Sie es in den Cache

Rufen Sie das Modul auf und übergeben Sie die entsprechenden Parameter module[moduleId].call(module.exports, module, module.exports, __webpack_require__); (Hier werden Exporte durch Dinge innerhalb des geändert Funktion)

markiert, dass das Modulobjekt geladen wurde

Gibt den vom Modul bereitgestellten Inhalt zurück (beachten Sie, dass module.exports an die obige Funktion übergeben wird und die Referenz geändert werden kann)

• Modulfunktion wird in Modul, Modulexporte, __webpack_require__

• Während des Ausführungsprozesses werden die Variablenfreigabe und die Referenz durch Ändern der vervollständigt Referenzen der oben genannten drei.

Was ist der Webpack-Modulmechanismus

Wir können einen Blick auf das Webpack-Modul werfen

doc.webpack-china.org/concepts/mo…

Webpack-Module können ihre Abhängigkeiten auf verschiedene Arten ausdrücken, einige Beispiele sind wie folgt:

• ES2015 Import-Anweisung

• CommonJS require()-Anweisung

• AMD-Definitions- und Anforderungsanweisungen

• @import Anweisungen in CSS/Sass/less-Dateien.

• Stil (URL(...)) oder Bildlink (Bild-URL) in HTML-Datei ()

Leistungsstarkes Webpack-Modul. Es ist kompatibel mit verschiedenen modularen Lösungen und ist nicht meinungsgebunden

Wir können ein weiteres Beispiel schreiben, um es herauszufinden

CommonJS

Ändern Sie src/index.js

var cj = require('./cj.js');
console.log('hello world');
cj();

Src/cj.js hinzufügen und alles andere gegenüber dem vorherigen Beispiel unverändert lassen

// src/cj.js
function a() {
 console.log("CommonJS");
}
module.exports = a;

Webpack erneut ausführen

/******/ (function(modules) { // webpackBootstrap
 //... 省略代码
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
let cj = __webpack_require__(1);
console.log('hello world');
cj();
/***/ }),
/* 1 */
/***/ (function(module, exports) {
function a() {
 console.log("CommonJS");
}
module.exports = a;
/***/ })
/******/ ]);

Wir können das Modularray sehen. Es sind weitere importierte Dateien vorhanden. und dann verfügt die Modulfunktion index.js über einen zusätzlichen Parameter __webpack_require__, um auf die Datei zu verweisen (__webpack_require__ wurde im vorherigen Abschnitt eingeführt). Insgesamt ändert das abhängige Modul module.exports, und dann führt das Hauptmodul Depend on the module and get exports aus

ES2015-Import

src/es.js hinzufügen

// src/es.js
export default function b() {
 console.log('ES Modules');
}

src/index.js ändern

// src/index.js
import es from './es.js';
console.log('hello world');
es();
webpack.config.js不变，执行webpack
/******/ (function(modules) { // webpackBootstrap
// ... 省略代码
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__es_js__ = __webpack_require__(1);
console.log('hello world');
Object(__WEBPACK_IMPORTED_MODULE_0__es_js__["a" /* default */])();
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = b;
function b() {
 console.log('ES Modules');
}
/***/ })
/******/ ]);

Wir können sehen, dass dies der Fall ist Alle werden in den strikten Modus übernommen. Die Leistung von

ähnelt tatsächlich der von CommonJS und wird dann im Hauptmodul geändert Wir können das sehen

Wofür wird das verwendet? Tatsächlich dient es dazu, die aktuellen Exporte als es-Modul zu markieren. Erinnern Sie sich noch an das vorherige __webpack_require__.n? ES-Module? Wo ist der Konflikt?

Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

Tatsächlich werden Sie diesen Teil kennen, wenn Sie den Quellcode der Babel-Konvertierung von ES-Modulen sehen. Um mit dem Modul kompatibel zu sein, werden ES-Module direkt an exports.default und dann an das __esModule angehängt Das Attribut wird hinzugefügt und bei der Einführung wird einmal beurteilt, ob es sich um ein Konvertierungsmodul handelt. Wenn ja, führen Sie das Modul ['default'] ein. Wenn nicht, führen Sie das Modul ein.

/******/  // getDefaultExport function for compatibility with non-harmony modules 解决ES module和Common js module的冲突，ES则返回module['default']
/******/  __webpack_require__.n = function(module) {
/******/   var getter = module && module.__esModule ?
/******/    function getDefault() { return module['default']; } :
/******/    function getModuleExports() { return module; };
/******/   __webpack_require__.d(getter, 'a', getter);
/******/   return getter;
/******/  };

Lassen Sie uns noch ein paar weitere vorstellen ES-Module, um den Effekt zu sehen

Lassen Sie uns weitere esTwo und esFour einführen, aber ohne esFour zu verwenden

erhalten wir

// src/es.js
export function es() {
 console.log('ES Modules');
}
export function esTwo() {
 console.log('ES Modules Two');
}
export function esThree() {
 console.log('ES Modules Three');
}
export function esFour() {
 console.log('ES Modules Four');
}

Nun, das ist es Eigentlich das Gleiche wie zuvor. Was ist der entscheidende Punkt in diesem Beispiel? und Webpack hat sie als unbenutzt markiert. Wenn Sie das Webpack-Plug-in uglify verwenden, werden durch die Markierung die beiden nicht verwendeten Codes esThree und esFour entfernt (eigentlich ist es ein Baumschütteln)

// src/index.js
import { es, esTwo, esFour} from './es.js';
console.log('hello world');
es();
esTwo();

AMD

/******/ (function(modules) { // webpackBootstrap
// ...
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__es_js__ = __webpack_require__(1);
console.log('hello world');
Object(__WEBPACK_IMPORTED_MODULE_0__es_js__["a" /* es */])();
Object(__WEBPACK_IMPORTED_MODULE_0__es_js__["b" /* esTwo */])();
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = es;
/* harmony export (immutable) */ __webpack_exports__["b"] = esTwo;
/* unused harmony export esThree */
/* unused harmony export esFour */
function es() {
 console.log('ES Modules');
}
function esTwo() {
 console.log('ES Modules Two');
}
function esThree() {
 console.log('ES Modules Three');
}
function esFour() {
 console.log('ES Modules Four');
}
/***/ })
/******/ ]);

Sehen wir uns an, wie Webpack AMD unterstützt

Neu src/amd.js hinzufügen

/* unused harmony export esThree */
/* unused harmony export esFour */

index.js ändern

um zu bekommen

Schauen Sie sich zuerst amd.js an, um den Code zu sortieren

// src/amd.js
define([
],function(){
 return {
  amd:function(){
   console.log('AMD');
  }
 };
});

Um es einfach auszudrücken: Sammeln Sie define Array, fügen Sie es in die Rückgabefunktion ein und erhalten Sie das Abhängigkeiten entsprechend den Parametern

// src/index.js
define([
 './amd.js'
],function(amdModule){
 amdModule.amd();
});

gelten, um das Array nacheinander in Parameter zu zerlegen

/******/ (function(modules) { // webpackBootstrap
// ... 省略代码
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
 __webpack_require__(1)
], __WEBPACK_AMD_DEFINE_RESULT__ = function(amdModule){
 amdModule.amd();
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
    __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
 return {
  amd:function(){
   console.log('AMD');
  }
 };
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
    __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ })
/******/ ]);

Sehen Sie sich den Modulteil index.js noch einmal an

function(module, exports, __webpack_require__) {
 var __WEBPACK_AMD_DEFINE_ARRAY__,
  __WEBPACK_AMD_DEFINE_RESULT__;
 !(
  __WEBPACK_AMD_DEFINE_ARRAY__ = [],
  __WEBPACK_AMD_DEFINE_RESULT__ = function() {
   return {
    amd: function() {
     console.log('AMD');
    }
   };
  }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
  __WEBPACK_AMD_DEFINE_RESULT__ !== undefined &&
  (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)
 );
})

Tatsächlich führt es ein {amd:[Funktion: amd]}

css/image von amd.js angezeigt?

css und image können auch zu einem Webpack-Modul werden. Das ist schockierend, es kann nicht einfach über einen normalen Aufruf aufgerufen werden Hacken Sie CommonJS oder Funktionsaufrufe, das ist alles für JS, es muss den Webpack-Loader verwenden, um

zu erreichen

像css就是转换成一段js代码，通过处理，调用时就是可以用js将这段css插入到style中，image也类似，这部分就不详细阐述了，有兴趣的读者可以深入去研究

webpack3新特性

我们可以再顺便看下webpack3新特性的表现

具体可以看这里medium.com/webpack/web…

Scope Hoisting

我们可以发现模块数组是一个一个独立的函数然后闭包引用webpack主函数的相应内容，每个模块都是独立的，然后带来的结果是在浏览器中执行速度变慢，然后webpack3学习了Closure Compiler和RollupJS这两个工具，连接所有闭包到一个闭包里，放入一个函数，让执行速度更快,并且整体代码体积也会有所缩小

我们可以实际看一下效果（要注意的是这个特性只支持ES Modules,是不支持CommonJs和AMD的）

使用上面的例子，配置webpack.config.js，增加new webpack.optimize.ModuleConcatenationPlugin()

const path = require('path');
const webpack = require('webpack');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 },
 plugins: [
 new webpack.optimize.ModuleConcatenationPlugin(),
 ]
};

打包

/******/ (function(modules) { // webpackBootstrap
// ... 省略代码
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// CONCATENATED MODULE: ./src/es.js
function es() {
 console.log('ES Modules');
}
function esTwo() {
 console.log('ES Modules Two');
}
function esThree() {
 console.log('ES Modules Three');
}
function esFour() {
 console.log('ES Modules Four');
}
// CONCATENATED MODULE: ./src/index.js
// src/index.js
console.log('hello world');
es();
/***/ })
/******/ ]);

我们可以惊喜的发现没有什么require了，它们拼接成了一个函数，good!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Webpack-Moduls und der neuen Funktionen von webpack3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!