Heim > Artikel > Web-Frontend > Webpack – ausführliche Erklärung des Modul-Packagers

Webpack – ausführliche Erklärung des Modul-Packagers

零下一度Original: 2017-06-26 09:48:372026Durchsuche

Die vorherigen Wörter

Vor dem Aufkommen von Webpack waren die bereits auf dem Markt vorhandenen Modulverwaltungs- und Verpackungstools nicht für große Projekte, insbesondere einseitige Webanwendungen, geeignet. Der dringendste Grund besteht darin, die Aufteilung und Speicherung verschiedener Modulressourcen in einer großen Codebasis aufrechtzuerhalten, die Abhängigkeiten zwischen ihnen aufrechtzuerhalten und sie nahtlos zu integrieren, um Inhalte zu generieren, die für das Laden statischer Ressourcen auf der Browserseite geeignet sind. Webpack ist derzeit das beliebteste modulare Verwaltungs- und Paketierungstool für Front-End-Ressourcen. Es kann viele lose Module in Front-End-Ressourcen packen, die gemäß Abhängigkeiten und Regeln mit der Bereitstellung in der Produktionsumgebung konsistent sind. Sie können die bei Bedarf geladenen Module auch durch Code trennen und sie dann asynchron laden, wenn sie tatsächlich benötigt werden.

Webpack ist inhaltsreich und chaotisch, was für Anfänger nicht geeignet ist. Dieser Artikel stellt die wichtigen Konzepte von Webpack anhand eines Beispiels vor und konzentriert sich auf die Verwendung von Webpack

Übersicht

Webpack ist ein Modulpaketierer.

[Funktionen]

Webpack verfügt über die folgenden Funktionen

Codeaufteilung

Webpack verfügt über zwei Möglichkeiten, Modulabhängigkeiten zu organisieren: synchron und asynchron. Asynchrone Abhängigkeiten dienen als Teilungspunkte zur Bildung eines neuen Blocks. Nach der Optimierung des Abhängigkeitsbaums wird jeder asynchrone Block als Datei gepackt.

Loader

Webpack selbst kann nur native JavaScript-Module verarbeiten, aber der Loader-Konverter kann verschiedene Arten von Ressourcen in JavaScript-Module konvertieren. Auf diese Weise kann jede Ressource zu einem Modul werden, das Webpack verarbeiten kann.

Intelligentes Parsen

Webpack verfügt über einen intelligenten Parser, der nahezu jede Bibliothek von Drittanbietern verarbeiten kann, unabhängig davon, ob diese in Form von Modulen, CommonJS, AMD oder gewöhnlich vorliegt JS-Dateien. Auch beim Laden von Abhängigkeiten ist der dynamische Ausdruck require("./templates/" + name + ".jade") zulässig.

Plug-in-System

Webpack verfügt auch über ein funktionsreiches Plug-in-System. Die meisten Inhaltsfunktionen basieren auf diesem Plug-In-System. Darüber hinaus können Open-Source-Webpack-Plug-Ins entwickelt und verwendet werden, um eine Vielzahl von Anforderungen zu erfüllen.

Läuft schnell

Webpack verwendet asynchrone E/A und mehrstufiges Caching, um die Ausführungseffizienz zu verbessern, wodurch Webpack unglaublich schnell und inkrementell kompiliert werden kann

[Installation]

Verwenden Sie npm, um Webpack zu installieren

$ npm install webpack

Ein häufiges Problem ist: Nach der Installation von Webpack können Sie den Webpack-Befehl nicht verwenden

Dies liegt daran, dass es nur eine lokale Installation und keine globale Installation gibt. Geben Sie den folgenden Code ein, um eine globale Installation durchzuführen, und führen Sie dann

$ npm install webpack -g

Verwenden Sie

aus

Erstellen Sie zunächst eine statische Seite index.html und eine JS-Eintragsdatei Eintrag.js

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js?1.1.11"></script>
</body>
</html>

// entry.jsdocument.write('It works.')

Dann kompilieren Sie Eintrag.js und packen in bundle.js:

$ webpack entry.js bundle.js

Der Verpackungsprozess zeigt das Protokoll an:

Hash: f47511e706e3de8f2417
Version: webpack 2.6.1Time: 47ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.66 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]

Öffnen Sie index.html mit einem Browser Sie sehen It works.

. Fügen Sie dann ein Modul hinzu module.js und ändern Sie den Eintrag entry.js:

// module.jsmodule.exports = 'It works from module.js.'

// entry.jsdocument.write('It works.')
document.write(require('./module.js')) // 添加模块

Neu verpacken webpack entry.js bundle.js und aktualisieren Sie die Seite, um die Änderungen zu sehen It works.It works from module.js.

Hash: 09733456f2c5b24a4845
Version: webpack 2.6.1Time: 61ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.83 kB       0  [emitted]  main
   [0] ./module.js 43 bytes {0} [built]
   [1] ./entry.js 75 bytes {0} [built]

Webpack Analysiert die Eintragsdatei und analysiert jede Datei, die Abhängigkeiten enthält. Diese Dateien (Module) werden in bundle.js gebündelt. Webpack weist jedem Modul und Index eine eindeutige ID zu und greift über diese ID auf das Modul zu. Wenn die Seite startet, wird zuerst der Code in Entry.js ausgeführt, und andere Module werden ausgeführt, wenn require ausgeführt wird

Loader

Webpack selbst kann Nur zum Verarbeiten von JavaScript-Modulen. Wenn Sie andere Dateitypen verarbeiten möchten, müssen Sie den Loader für die Konvertierung verwenden.

Loader kann als Konverter von Modulen und Ressourcen verstanden werden. Er selbst ist eine Funktion, die Quelldateien als Parameter akzeptiert und das Konvertierungsergebnis zurückgibt. Detaillierte Informationen werden hierher verschoben

Dem obigen Beispiel folgend, müssen wir eine CSS-Datei style.css in die Seite einführen, um require("!style-loader!css-loader!./style.css?1.1 zu verwenden .11") Code, die Lesereihenfolge des Codes ist von rechts nach links, was bedeutet, dass die Homepage style.css als Modul betrachtet. Laden Sie zuerst style.css, verwenden Sie dann css-loader, um es zu lesen, und verwenden Sie dann style-loader Es wird in die Seite eingefügt

/* style.css */body { background: yellow; }

Eintrag.js ändern:

require("style-loader!css-loader!./style.css?1.1.11") 
document.write('It works.')
document.write(require('./module.js'))

Loader installieren:

npm install css-loader style-loader

　　重新编译打包，刷新页面，就可以看到黄色的页面背景了

　　如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

　　将 entry.js 中的 require("!style-loader!css-loader!./style.css?1.1.11") 修改为 require("./style.css?1.1.11") ，然后执行

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

　　显然，这两种使用 loader 的方式，效果是一样的

配置

　　Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config选项来指定配置文件。

　　继续我们的案例，在根目录创建 package.json 来添加 webpack 需要的依赖：

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"css-loader": "^0.28.4","style-loader": "^0.18.2","webpack": "^2.6.1"
  }
}

　　别忘了运行 npm install。然后创建一个配置文件 webpack.config.js，在下面的配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。相当于告诉webpack compiler，碰到「在require()/import语句中被解析为'.css'的路径」时，在把它们添加并打包之前，要先使用css-loader后使用style-loader去转换

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'bundle.js'//出口名称  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  }
}

　　同时简化 entry.js 中的 style.css 加载方式：

require('./style.css');

　　最后运行 webpack，可以看到 webpack 通过配置文件执行的结果和上一节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的

　　如果配置文件并不叫做默认的webpack.config.js，而是其他的名称，如test.js，则需要设置如下命令进行打包

webpack --config test.js

插件

　　插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。详细信息移步至此

　　想要使用一个插件，只需要require()它，然后把它添加到plugins数组中。内置插件则不需要require，直接使用即可

　　接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。

　　修改 webpack.config.js，添加 plugins：

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'bundle.js'//出口名称  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  plugins: [new webpack.BannerPlugin('This file is created by xiaohuochai')
  ]
}

　　然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：

/*! This file is created by xiaohuochai *//******/ (function(modules) { // webpackBootstrap/******/  // The module cache/******/  var installedModules = {};// 后面代码省略

开发环境

　　当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色

$ webpack --progress --colors

　　如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的

$ webpack --progress --colors --watch

　　比如，执行以上命令后，修改'style.css'的body的背景颜色为红色，不用重新编译，刷新页面后，页面即发生改变

　　当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面

# 安装
$ npm install webpack-dev-server -g

# 运行
$ webpack-dev-server --progress --colors

　　比如，执行以上命令后，修改'style.css'的body的背景颜色为蓝色，不用重新编译，也不用刷新页面，页面即发生改变

Das obige ist der detaillierte Inhalt vonWebpack – ausführliche Erklärung des Modul-Packagers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in fünf Verwendungsmöglichkeiten von requireNächster Artikel：Einführung in fünf Verwendungsmöglichkeiten von require

In Verbindung stehende Artikel

Mehr sehen