Wie Webpack js verpackt

Webpack ist ein Front-End-Tool zum Laden/Verpacken von Ressourcen. 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. Dieser Artikel führt Sie hauptsächlich in die Methode zum Packen von js mit Webpack ein. Bevor ich den Code übe, möchte ich zunächst über die Grundkenntnisse von Webpack sprechen.

1. Warum WebPack verwenden

Viele Webseiten können heute tatsächlich als funktionsreiche Anwendungen angesehen werden. Sie verfügen über komplexe JavaScript-Codes und viele Abhängigkeitspakete. Um die Komplexität der Entwicklung zu vereinfachen, sind in der Front-End-Community viele bewährte Methoden entstanden

1. Modularisierung ermöglicht es uns, komplexe Programme in kleine Dateien zu verfeinern;

2. Ähnlich wie TypeScript, eine auf JavaScript basierende Entwicklungssprache: Sie ermöglicht uns die Implementierung von Funktionen, die in der aktuellen Version von JavaScript nicht direkt verwendet werden können, und kann später in JavaScript-Dateien konvertiert werden, damit der Browser Erkennung

3. Scss, less und andere CSS-Präprozessoren

4. …

2. Was ist Webpack

WebPack kann als Modulpaketierer betrachtet werden: Es analysiert Ihre Projektstruktur und findet JavaScript-Module und andere Erweiterungssprachen, die nicht direkt von Browsern ausgeführt werden können (Scss , TypeScript usw.) und packen Sie es in ein geeignetes Format für die Browsernutzung.

3. Was sind die Eigenschaften von WebPack im Vergleich zu Grunt und Gulp? Ein Tool, das den Front-End-Entwicklungsprozess optimieren kann, und WebPack ist eine modulare Lösung, aber die Vorteile von Webpack ermöglichen es Webpack, Gulp/Grunt-Tools zu ersetzen.

Die Funktionsweise von Grunt und Gulp ist: Geben Sie in einer Konfigurationsdatei die spezifischen Schritte an, um Aufgaben wie Kompilierung, Kombination, Komprimierung usw. für bestimmte Dateien auszuführen. Dieses Tool kann diese Aufgaben dann automatisch für Sie erledigen .

Diese Verbesserungen haben unsere Entwicklungseffizienz zwar erheblich verbessert, aber die mit ihnen entwickelten Dateien erfordern oft eine zusätzliche Verarbeitung, um vom Browser erkannt zu werden, und die manuelle Verarbeitung ist sehr antiblockierend, weshalb Anforderungen gestellt werden für die Entstehung von Tools wie WebPack.

Die Funktionsweise von Webpack ist: Behandeln Sie Ihr Projekt als Ganzes, über eine bestimmte Hauptdatei (z. B. index.js) startet Webpack von dieser Datei aus Finden Sie alle Erstellen Sie die Abhängigkeitsdateien Ihres Projekts, verwenden Sie Loader, um sie zu verarbeiten, und packen Sie sie schließlich in eine JavaScript-Datei, die vom Browser erkannt werden kann.

Auf dem Bild können wir sehen, dass Webpack eine Vielzahl statischer Ressourcen (JS, CSS usw.) in eine statische Datei konvertieren kann, wodurch Seitenanforderungen reduziert werden.

Wenn Sie die beiden wirklich vergleichen möchten: Die Verarbeitungsgeschwindigkeit von Webpack ist schneller und direkter und es kann mehr verschiedene Dateitypen verpacken.

Als nächstes stellen wir Ihnen kurz vor

Wie Webpack mehrere JS-Dateien zusammenführt (beachten Sie, dass dies nur das Zusammenführen von Dateien ist, dh das Zusammenführen mehrerer geschriebener JS in einer JS-Datei, um HTTP-Anfragen zu reduzieren).

Webpack installieren

Bevor Sie Webpack installieren, muss Ihre lokale Umgebung node.js unterstützen. Informationen zur Installation von node.js finden Sie in der offiziellen Node-Dokumentation.

Verwenden Sie den folgenden Befehl, um Webpack global zu installieren.

Webpack wurde auf Ihrem Computer installiert und Sie können jetzt den Webpack-Befehl verwenden.

$ npm install webpack -g

Webpack im Projekt verwenden

Verwenden Sie den folgenden Befehl, um die Datei package.json im Stammverzeichnis des Projekts zu generieren.

Webpack im Projekt installieren

$ npm init

Webpack zur Konfigurationsdatei pageage.json hinzufügen, verwenden Sie den folgenden Befehl:

Sehen Sie sich die Datei package.json zu diesem Zeitpunkt noch einmal an. Im Vergleich zu dem Zeitpunkt, als package.json gerade erstellt wurde, wurde ein neuer Code hinzugefügt.

$ npm install --save-dev webpack

Zwei Arten der Webpack-Verpackung

Webpack-Eintrag (Befehlszeile)

1. webpack -config webpack.conf.js (Webpack-Konfigurationsdatei angeben)
Befehlszeilenpaket js verwenden

1: Erstellen Sie zwei JS-Dateien

Erstellen Sie app.js, sum.js und exportieren Sie eine sum.js-Additionsfunktion , app.js verwendet diese Funktion.

Zweitens: Verwenden Sie den Webpack-Befehl zum Packen

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
  return a + b;
}

Verwenden Sie im aktuellen Verzeichnis: Webpack-App. js bundle .js ; Der Eintrag hier ist app.js und die Ausgabedatei ist bundle.js, sodass Sie in der Datei eine zusätzliche bundle.js-Datei sehen werden.

Erstellen Sie eine auszuführende HTML-Datei, führen Sie bundle.js zur Ausführung ein, die Konsole druckt: sum(21, 22) 43.

Verwenden Sie die Webapck-Konfigurationsdatei zum Packen (immer noch die beiden oben genannten JS-Dateien)

创建一个webpack.conf.js，编写wepack的配置文件

// 配置文件使用commonjs规范

module.exports = {

  // 入口，是一个对象
  entry: {
    app: './app.js'
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:5].js'
  }
}

1. 在命令行输入：webpack --config webpack.conf.js，发现生成了一个app.dd1c6.js带hash的js文件。将这个js文件引入HTML里面发正常输出：sum(21, 22) 43

2. 配置文件的命名为webpack.config.js，则直接在命令行输入webpack就可以。

webapck配合babel打包ES6、7

在项目根目录安装bable-loader和babel-core，babel-preset

1. 使用npm init生成一个配置文件

2. npm install babel-loader babel-core --save-dev

3. 新建app.js，index.html，webpack.config.js等文件

4. 编写webpack.config.js

5. 安装babel-preset来指定编译的版本：npm install babel-preset-env --save-dev

6. 在app.js里面随便写一些ES6的语法

7. 使用命令行输入webpack进行编译

webpack配置文件

// 配置文件使用commonjs规范
module.exports = {

  // 入口，是一个对象
  entry: {
    app: './app.js' // 相对路径
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一项是一个规则
    rules:[
      {
        test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
        use: {
          loader: 'babel-loader', // 使用bable-loader来处理
          options: { // 指定参数
            presets: [
              ['babel-preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 version'] //具体可以去babel-preset里面查看
                } 
              }]
              
            ] // 指定哪些语法编译
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

app.js和编译之后带hash的js

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);

// ==================//
// 编译之后（直接截取了编译的代码）
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
 return item * 2;
}); // 将以前数组每一项*2

console.log(newArr);

babel的两个插件：Babel Polyfill 和 Babel Runtime Transform

用来处理一些函数和方法（Genertor,Set,Map,Array.from等未被babel处理，需要上面的两个插件）

1. Babel Polyfill（全局垫片），npm install babel-polyfill --save, 使用：import "babel-polyfill";

2. Babel Runtime Transform（为开发框架准备），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save

3. 新建一个.babelrc来进行配置

app.js里面新增代码

import "babel-polyfill";
let func = () => {};
const num = 30; 
let arr = [3, 4, 5, 6];
let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);
// 需要babel-polyfill
arr.includes(8);

// Genertor 函数
function* func2() {
}

webpack配置

// 配置文件使用commonjs规范
module.exports = {
  // 入口，是一个对象
  entry: {
    app: './app.js' // 相对路径
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一项是一个规则
    rules:[
      {
        test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
        use: {
          loader: 'babel-loader', // 使用bable-loader来处理
          options: { // 指定参数
            
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

.babelrc文件配置

{
  "presets": [
    ["babel-preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 version"]
      } 
    }] 
  ],
  "plugins": ["transform-runtime"]
}

相关推荐：

webpack打包之后的文件过大如何解决

webpack打包器的简单介绍

vue-cli快速构建vue应用并实现webpack打包详解

Das obige ist der detaillierte Inhalt vonWie Webpack js verpackt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!