Ausführliche Erläuterung der modularen Webpack-Verwaltung und der Verwendung von Verpackungstools

Dieses Mal werde ich Ihnen die Verwendung der modularen Verwaltungs- und Verpackungstools von Webpack ausführlich erklären. Was sind die Vorsichtsmaßnahmen für die Verwendung der modularen Verwaltungs- und Verpackungstools von Webpack? Schauen Sie mal rein.

Einführung in Webpack

Webpack ist derzeit das beliebteste Front-End-Tool für die modulare Verwaltung und Verpackung von 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 den Code von bei Bedarf geladenen Modulen auch trennen und asynchron laden, bis sie tatsächlich

benötigt werden. Durch die Loader-Konvertierung kann jede Form von Ressource als Modul betrachtet werden, z. B. CommonJs-Module, AMD-Module, ES6-Module, CSS, Bilder, JSON, Coffeescript, LESS usw.

Entwicklung des Modulsystems<script> Tag</p> <pre class="brush:php;toolbar:false">&lt;script src=&quot;module1.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;module2.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;libraryA.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;module3.js&quot;&gt;&lt;/script&gt;</pre> <p style="text-align: left;">Dies ist die originellste Methode zum Laden von JavaScript-Dateien. Wenn jede Datei als Modul betrachtet wird, werden ihre Schnittstellen normalerweise im globalen Kontext angezeigt Bereich, dh im Fensterobjekt definiert, </p> <p style="text-align: left;">Schnittstellenaufrufe verschiedener Module befinden sich im selben Bereich. Einige komplexe Frameworks verwenden das Konzept von <a href="http://www.php.cn/wiki/220.html" target="_blank">Namespace</a> Organisieren Sie die Schnittstellen dieser Module. Ein typisches Beispiel ist die YUI-Bibliothek. </p> <p style="text-align: left;">Diese ursprüngliche Lademethode weist einige offensichtliche Nachteile auf: </p> <ol class=" list-paddingleft-2"> <li><p style="text-align: left;">Es ist leicht, Variablenkonflikte im globalen Bereich zu verursachen</p></li> <li><p style="text-align: left;"> Dateien können nur in der Reihenfolge geladen werden, in der <script> In großen Projekten sind verschiedene Ressourcen schwer zu verwalten und langfristig angesammelte Probleme führen zu einer chaotischen Codebasis</script>

CommonJS-Spezifikation

CommonJS ist ein Projekt, das mit dem Ziel ins Leben gerufen wurde, ein JavaScript-Ökosystem außerhalb von Browserumgebungen aufzubauen, beispielsweise in Server- und Desktop-Umgebungen.

Die CommonJS-Spezifikation ist eine Modulform, die zur Lösung des Umfangsproblems von JavaScript definiert ist und es jedem Modul ermöglicht, in seinem eigenen Namensraum auszuführen. Der Hauptinhalt dieser Spezifikation besteht darin, dass Module externe Variablen oder Schnittstellen über module.exports exportieren und die Ausgabe anderer Module über require() in den aktuellen Modulbereich importieren müssen. Ein intuitives Beispiel

// moduleA.js
module.exports = function( value ){
  return value * 2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

AMD-Spezifikation

AMD (Asynchronous Module Definition) ist für Browserumgebungen konzipiert, weil die Das CommonJS-Modulsystem wird synchron geladen und die aktuelle Browserumgebung ist nicht bereit, Module synchron zu laden.

Das Modul wird im Abschluss durch die Definitionsfunktion im folgenden Format definiert:

define(id?: String, dependencies?: String[], factory: Function|Object);

id ist der Name des Moduls, der ein optionaler Parameter ist. factory ist der letzte Parameter, der die spezifische Implementierung des Moduls umschließt, bei dem es sich um eine Funktion oder ein Objekt handelt. Wenn es sich um eine Funktion handelt, ist ihr Rückgabewert die Ausgabeschnittstelle oder der Wert des Moduls.

Einige Anwendungsfälle

Definieren Sie ein Modul mit dem Namen myModule, das vom jQuery-Modul abhängt:

define('myModule', ['jquery'], function($) {
  // $ 是 jquery 模块的输出
  $('body').text('hello world');
}); // 使用 require(['myModule'], function(myModule) {});

Hinweis: Im Webpack hat der Modulname in Require nur einen lokalen Gültigkeitsbereich . Der Modulname in js hat einen globalen Gültigkeitsbereich und kann global referenziert werden.

Definieren Sie ein anonymes Modul ohne ID-Wert, das normalerweise als Startfunktion der Anwendung verwendet wird:

define(['jquery'], function($) {
  $('body').text('hello world');
});

AMD verwendet auch die require()-Anweisung zum Laden von Modulen, erfordert jedoch im Gegensatz zu CommonJS zwei Parameter

Der erste Parameter [Modul] ist ein Array, dessen Mitglieder die zu ladenden Module sind; der zweite Parameter-Callback ist die

Callback-Funktion

nach erfolgreichem Laden. Wenn der vorherige Code in AMD-Form umgeschrieben wird, sieht er folgendermaßen aus:

math.add() und das Laden des Mathematikmoduls sind nicht synchronisiert und der Browser friert nicht ein. Daher ist AMD offensichtlich besser für Browserumgebungen geeignet

Derzeit gibt es zwei Haupt-Javascript-Bibliotheken, die die AMD-Spezifikation implementieren: require.js und curl.js

　require(['math'], function (math) {
　　　　math.add(2, 3);
　　});

Was? Ist Webpack

Webpack ist ein Modul-Bundler. Es führt eine statische Analyse basierend auf Modulabhängigkeiten durch und generiert dann gemäß den angegebenen Regeln entsprechende statische Ressourcen für diese Module.

Webpack 的特点

1. 代码拆分

2. Loader

3. 智能解析

4. 插件系统

5. 快速运行

webpack基本使用

创建项目根目录

初始化

npm init 或 npm init -y

全局安装

npm install webpack -g

局部安装,在项目目录下安装

npm install webpack --save-dev

--save: 将安装的包的信息保存在package中

--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件

如果使用web开发工具,单独安装

npm install webpack-dev-server --save-dev

基本使用

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：

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

创建entry.js

// entry.js : 在页面中打印出一句话
document.write('It works.')

然后编译 entry.js并打包到 bundle.js文件中

// 使用npm命令 
webpack entry.js bundle.js

使用模块

1.创建模块module.js,在内部导出内容

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

2.在entry.js中使用自定义的模块

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

加载css模块

1.安装css-loader

npm install css-loader style-loader --save-dev

2.创建css文件

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

3.修改 entry.js：

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

创建配置文件webpack.config.js

1.创建文件

var webpack = require('webpack')
module.exports = {
 entry: './entry.js',
 output: {
  path: dirname,
  filename: 'bundle.js'
 },
 module: {
  loaders: [
    //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
   {test: /\.css$/, loader: 'style-loader!css-loader'}
  ]
 }
}

2.修改 entry.js 中的 style.css 加载方式：require('./style.css')

3.运行webpack

在命令行页面直接输入webpack

插件使用

1.插件安装

//添加注释的插件
npm install --save-devbannerplugin

2.配置文件的书写

var webpack = require('webpack')
module.exports = {
  entry: './entry.js',
  output: {
    path: dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ],
    plugins: [
      //添加注释的插件
      new webpack.BannerPlugin('This file is created by zhaoda')
    ]
  }
}

3.运行webpack

// 可以在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */

开发环境

webpack

--progress : 显示编译的进度

--colors ：　带颜色显示，美化输出

--watch　：　开启监视器，不用每次变化后都手动编译

12.4.7.1. webpack-dev-server

开启服务,以监听模式自动运行

1.安装包

npm install webpack-dev-server -g --save-dev

2.启动服务

实时监控页面并自动刷新

webpack-dev-server --progress --colors

自动编译

1.安装插件

npm install --save-dev html-webpack-plugin

2.在配置文件中导入包

var htmlWebpackPlugin = require('html-webpack-plugin')

3.在配置文件中使用插件

plugins: [
    //添加注释的插件
    new webpack.BannerPlugin('This file is created by zhaoda'),
    //自动编译
    new htmlWebpackPlugin({
      title: "index",
      filename: 'index.html', //在内存中生成的网页的名称
      template: './index.html' //生成网页名称的依据
    })
  ]

4.运行项目

webpack--save-dev

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue-cli项目中使用bootstrap步骤详解

vue事件机制使用详解

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der modularen Webpack-Verwaltung und der Verwendung von Verpackungstools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!