Einführungsteil

Einführung

Ich denke, es gibt einige Leute, die hauptsächlich Ruby und Rails entwickeln und sagen "Ich verstehe JS nicht wirklich". Aber solange der Browser da ist, kann die Menschheit JS nicht entkommen. Dieser Artikel wurde geschrieben, um Rubisten, die nicht gut in JS sind, zu helfen, sich mit Webpack anzufreunden.

Wenn Sie wissen, was Webpacker ist, ist es auf jeden Fall nützlich. Wenn Sie es nicht wissen, lesen Sie es bitte. Wenn ich ein Rails-Entwickler bin, der mit JS nicht vertraut ist, würde ich gerne wissen, wer Webpack und Webpacker sind.

Zielgruppe

Entwickler, die nicht wissen, wofür Webpack ist --Rails Entwickler, die Webpacker verwenden, ohne es zu wissen

Überblick

Was in diesem Artikel zu erklären

――Warum wir Webpack verwenden (erste Hälfte) --Was machen Webpack und Webpacker (zweite Hälfte)

In diesem Artikel nicht erklärt

Detaillierte Methode zum Schreiben von webpack.config.js

Verstehen Sie den Zweck von Webpack

Beziehung zwischen Webpack und Webpacker

Erstens sind ** Webpack und Webpacker unterschiedlich **. ** Webpack ist ein JS npm-Paket **. Ich bin in der JS-Community aufgewachsen. npm ist ein Paketverwaltungstool, das mit Node.js, dh Bundler in Ruby, verwendet werden kann. JS-Entwickler verwenden alle dieses npm oder sein alternatives Garn. Und ** Webpacker ist ein Ruby-Juwel **. Schienen ** machten es auch einfach, Webpack zu verwenden **. Wenn Sie also wissen, wer das Haupt-Webpack ist, können Sie auch wissen, was der Webpacker tun möchte. Was ist ein Webpack?

Webpack-Monstertheorie

Mit einem Wort, "Was ist ein Webpack" wird allgemein als ** Modulbündler ** erklärt. Modulbündler ……? Es macht keinen Sinn. Das Ultraman-Monster könnte einen solchen Namen gehabt haben. 怪獣のイラスト Selbst wenn Sie sich das Monster-Bilderbuch ansehen, ist die Erklärung des Modulbündlers nirgendwo geschrieben.

Ich kann das Gefühl verstehen, dass "** JS-Leute unfreundlich sind, JS ist keine Sprache für mich. Ich werde mit offenen Klassen, method_missing und Affen-Patches ** leben", aber meine Gefühle Bitte hören Sie sich die Geschichte an.

Ein Modulbündler dient zum Bündeln von Modulen. Warten Sie, ich habe noch nichts erklärt. Bitte hör mir etwas mehr zu.

Schienen können das, oder?

Wenn Sie mit Rails eine Web-App von angemessener Größe erstellen würden, hätten Sie wahrscheinlich viele Dateien in diesem Projekt. Einige Klassen werden in diese Dateien geschrieben, und Methoden werden geschrieben. Vielleicht ist die Klasse auch in einem Modul.

Zum Beispiel so. Dies ist ein fiktiver Code, der in Rails häufig vorkommt. Es ist ein Controller, der dem Administrator eine Seite zum Importieren von Benutzerinformationen in Massen-CSV anzuzeigen scheint.

`admin/import_users_controller.rb`


module Admin
  class ImportUsersController < ApplicationController
    # [GET] /admin/import_users(.:format)
    def index
      #Etwas verarbeiten A.
    end
  end
end

Übrigens habe ich beim Hinzufügen von Funktionen einen solchen Controller an einer völlig anderen Stelle als dem obigen Code erstellt.

`user/import_users_controller.rb`


module User
  class ImportUsersController < ApplicationController
    # [GET] /user/import_users(.:format)
    def index
      #Etwas verarbeitet B.
    end
  end
end

Ich habe zwei Controller mit dem Namen "ImportUsersController" in verschiedenen Modulen. Gibt es ein Problem? …… Es gibt kein Problem. Dies liegt daran, dass die Namespaces nach Modulen getrennt sind.

Es ist ein eindringliches Beispiel, aber selbst wenn Sie sagen "Ich möchte den Inhalt von Admin wirklich in einem anderen Modul aufrufen!" Durch Angabe von "Admin :: ImportUsersController" ist es möglich, es aufzurufen. Es ist egal, ob du es tust.

JS alte Geschichte

Diese Art von Dingen, die Ruby für selbstverständlich hält, war mit JS lange Zeit schwierig zu tun. Was ich nicht konkret tun konnte, war, dass ich nicht einfach die Module teilen und die Bereiche zwischen den Modulen trennen konnte. Selbst wenn die Dateien getrennt würden und mehrere Dateien gleichzeitig gelesen würden, würden die Namen leicht in Konflikt geraten.

"Ist JS alles global?"

Nein, so weit ist es nicht. Sogar im alten JS gab es vorerst einen nicht globalen Spielraum. ** Funktionsumfang **. Was ist ein Funktionsumfang? Auf diesen Bereich kann in einer Funktion nicht von außen zugegriffen werden.

`Altes JavaScript.js`


var globalScope = "Globaler Geltungsbereich";

function hogeFunc() {
    var functionalScope = "Unabhängig davon, welchen Variablennamen Sie in der Funktion angeben, wird dieser von außen nicht überschrieben";
}

Ältere JS hatten nicht einmal einen Ruby-Modul-ähnlichen Namespace-Trennmechanismus oder gar eine Klassensyntax. Daher verwenden Menschen ihre Weisheit und verwenden Funktionsbereiche, um Funktionsbereiche zu verwenden, um ** beschissene mysteriöse Syntax ** zu erstellen, die als "Schließer" und ** Geister in Klammern bezeichnet werden und als "Sofortfunktionen" ** bezeichnet werden. Ich habe es geschaffen und es geschafft, es zu täuschen. Aber das gehört der Vergangenheit an.

Das stärkste JS, an das ich gedacht habe

JS ist zu schmerzhaft, um eine böse Syntax verwenden zu müssen, um globale Verschmutzung zu verhindern, aber die Genies der Welt sind natürlich abgeschnitten, und die Ungeduld der drei Haupttugenden des Programmierers ist die Kraft, sie besser zu machen. Ich habe versucht, JS zu erstellen. Um die Entwicklungserfahrung bei JS zu verbessern, hat jeder Entwickler begonnen, JS-Spezifikationen zu formulieren. ブチギレる人のイラスト Als Ergebnis davon, dass jeder Entwickler an jedem Ort Spezifikationen mit "dem stärksten JS, an das ich gedacht habe" erstellt, werden verschiedene Modulmechanismen erstellt.

CommonJS (CJS)
ECMAScript Module (ESM)
Asynchronous Module Definition (AMD)

Diese definieren alle die Grammatik zum Auflösen des Moduls. Diejenigen, die noch überleben, sind "CJS" und "ESM". Ich werde erklären, wie man Module ** grob ** importiert.

Wie schreibe ich CommonJS

Aus historischer Sicht denke ich, dass Sie es oft in Node.js sehen. Es ist so.

const a = require('./AnotherFile.js');

a.anotherFileMethod();

Auf diese Weise ist es jetzt möglich, Dateien zu trennen, ohne den Namespace zu verschmutzen. Bitte beachten Sie, dass es sich von ** // = require` in Sprockets ** unterscheidet.

ECMAScript Module

ECMAScript ist grob gesagt die formalste JavaScript-Spezifikation. Die dort definierte Grammatik. Es ist in Ordnung zu glauben, dass dies in Zukunft zum Mainstream werden wird.

import a from './AnotherFile.js';

a.anotherFileMethod();

Mit dieser Methode können Sie auch Dateien trennen, ohne den Namespace zu verschmutzen. Da die Erklärung ziemlich kompliziert ist, lesen Sie bitte einen anderen Artikel usw. für eine detaillierte Verwendung.

Wie auch immer, ich habe eine Grammatik, die den Namespace teilen kann

Deshalb sind alle JS-Entwickler mit der Modularisierung ihres Codes zufrieden. Ich habe eine Sache, die ich lösen möchte, aber ich habe mehrere Spezifikationen, aber ** es ist eine triviale Angelegenheit, also schließen Sie Ihre Augen **. Ich bin glücklich.

IE und Teme sind jedoch nicht gut

Genau wie Ruby CRuby, mruby und JRuby hat, hat JS verschiedene Implementierungen. So wie Ruby keiner ist, ist es auch JS.

Jedes Unternehmen verfügt über eine eigene JS-Engine, z. B. ** V8 ** in Chrome, ** Spider Monkey ** in Firefox und ** Chakra ** in Internet Explorer. Sie haben individuelle Implementierungen, um JS selbst zu interpretieren. Diese Engines werden auch außerhalb des Browsers verwendet. Beispielsweise wird es auch in Node.js und JScript unter Windows verwendet. In dieser Form werden der ursprünglichen Engine weitere Funktionen hinzugefügt. Es scheint, dass in letzter Zeit überall auf Googles V8 konvergiert hat, aber lassen wir das jetzt.

** Das Problem ist IE. ** ** ** IEのイラスト Jetzt [stellt sogar Microsoft die Unterstützung für IE in Office 365 ein](https://blogs.windows.com/japan/2020/08/18/microsoft-365-apps-say-farewell-to- Es war sehr unwahrscheinlich, dass Internet-Explorer-11 /) die IE-Unterstützung vor fünf oder sechs Jahren einstellen würde.

Denken Sie darüber nach, auch wenn Sie sagen: "Ich habe den JS-Spezifikationen eine schöne neue Grammatik hinzugefügt!". Die Spezifikationen sind nur Spezifikationen, und wenn Sie sie nicht implementieren, können Sie nicht sprechen. Wenn Sie "** Fügen Sie das ECMAScript-Modul zum IE-Chakra hinzu. Bitte ☆ **" sagen, wird Microsoft es hinzufügen? Im Gegenteil, wenn Sie ein Microsoft-Manager sind, können Sie sich entscheiden, viel Geld für die Implementierung auszugeben? Ich entwickle bereits einen neuen Browser, Edge.

Aus diesem Grund ** funktioniert weder das ECMAScript-Modul noch CommonJS im IE (https://caniuse.com/mdn-javascript_statements_import). ** ** **

Wenn Sie aufgeben, endet alles hier

** Ich möchte definitiv keine beschissene Syntax wie Closures oder Sofortfunktionen schreiben, obwohl die neue Grammatik genau dort ist. ** ** ** ** Aber ich muss den Code auch im IE ausführen. ** ** ** 悩む人のイラスト Um ein solches Dilemma zu lösen, haben die Entwickler erneut ihre Weisheit gequetscht. "Wenn ja, wäre es nicht schön, wenn es ein Entwicklungstool gäbe, das das, was in einem modernen Modul geschrieben wurde, gut in einer Datei kombinieren könnte, damit es im IE gelesen werden kann?"

Das Entwicklungswerkzeug ist so! !! !! webpackのイラスト Es ist ** Webpack **!

Was Webpack und Webpacker tun

Was Webpack kann

webpack ist ein Modulbündler

Das Bild unten wurde nicht von mir erstellt, sondern ist nur eine Kugel von Webpack Official HP. Ich habe das Gefühl, dass verschiedene Arten von Dateien kompiliert werden und es scheint js oder css zu sein. Tatsächlich haben sich die Brüder Rubist, die versucht haben, eine statische Datei durch Ausführen des vorliegenden Befehls "bin / webpack" zu generieren, möglicherweise so gefühlt. Aber versteh mich nicht falsch. Webpack ist kein Compiler. Es ist ein Modulbündler. ** ** **

Wie ich bereits geschrieben habe, löst Webpack nur Dateiabhängigkeiten auf der Grundlage von ESMs "Import" und CJSs "Require" auf, wodurch es zu einer neuen JS-Datei wird, die vom IE gelesen werden kann. Es ist nicht möglich, sass in CSS oder TypeScript in JavaScript zu kompilieren.

Schauen Sie sich das Bild genauer an. Oben steht "Bundle your scripts". Es ist nicht "Kompilieren Sie Ihre Skripte".

(* Zur Vereinfachung der Kommunikation sage ich oft "eine JS-Datei", aber es wird nicht eine Datei tatsächlich generiert, sondern mehrere Dateien werden asynchron gelesen. "Import" und "erfordern" sind jedoch aus der generierten Datei verschwunden.

Loader (derjenige, der vor dem Bündeln kompiliert werden kann)

Wenn ich den Build jedoch mit Webpacker ausführe, wird TypeScript tatsächlich zu JavaScript, das auch im IE gelesen werden kann, und sass wird zu CSS, das sich gut anfühlt. Dies bedeutet, dass Sie auch mit Webpack kompilieren können.

Tatsächlich kann Webpack eine externe Bibliothek verwenden, um ** als Vorprozess zu kompilieren und dann die Module zu bündeln. ** Diese Bibliothek heißt "Loader".

Zum Beispiel gibt es npm-Pakete wie "ts-loader" für TypeScript und "sass-loader" für Sass. Wenn Sie den Loader auf Webpack setzen, kann Webpack verstehen, dass "zuerst ts-loader verwendet wird, um TypeScript in JavaScript zu konvertieren und dann das Modul aufzulösen". Infolgedessen können Sie eine einzelne gebündelte JavaScript-Datei aus mehreren Dateien generieren, die ursprünglich TypeScript waren.

Es gibt so viele Lader nur auf der offiziellen Webpack-Website, und wenn Sie Ihr Bestes geben, können Sie Ihre eigenen erstellen.

Sie können mehrere Lader einstellen. Zum Beispiel so.

Kompilieren Sie sass mit sass-loader
Kompilieren Sie PostCSS mit dem Postcss-Loader
Laden Sie das in JS geschriebene CSS mit dem CSS-Loader
Fügen Sie mit Style-Loader die CSS-Zeichenfolge in JS in das DOM ein

Um dies in der Reihenfolge von 1 zu verarbeiten, muss es in der richtigen Reihenfolge in webpack.config.js geschrieben werden. ** Das Loader-Array in webpack.config wird zuerst vom späteren Loader verarbeitet. Stellen Sie also den Loader, den Sie verarbeiten möchten, zuerst an das Ende des Arrays. ** ** **

`js:webpack.config.Konzept von js`


use: [
  { loader: 'style-loader' },   //(4.)
  { loader: 'css-loader' },     //(Der dritte)
  { loader: 'postcss-loader' }, //(Der Zweite)
  { loader: 'sass-loader' }     //(Zuerst)
]

Plötzlich kam die Geschichte von CSS und Bildern heraus! ?? (Hinzugefügt am 2020/11/03)

Bis jetzt habe ich nur über JS gesprochen, aber plötzlich gab es eine Geschichte über CSS, und auf der offiziellen Website von Webpack ist eine Bilderweiterung geschrieben, daher denke ich, dass einige Leute überrascht sein könnten. ** Du musst nicht alles verstehen **, also schau dir den React + TypeScript-Code unten an ** irgendwie **.

`React+TypeScript-Code(Datei mit der Erweiterung tsx)`


import React from "react";
import style from "./Layout.module.css"; //Punkt! CSS importieren

const Layout: React.FC = ({ children }) => {
  return (
    <div className={style.app}>
      <div className={style.appContainer}>{children}</div>
    </div>
  );
};
export default Layout;

Zusätzlich zum Generieren von HTML auf der Rails-Serverseite kann heutzutage mithilfe von React and Vue HTML auf der JS-Seite des Frontends generiert werden. In diesem Fall sollte das Webpack auch Code in den Formen ".jsx", ".tsx" und ".vue" lesen können. Es mag eine ungewohnte Erweiterung sein, aber es ist alles wie eine Variante von .js. Der Sinn dieses Codes ist ** das Importieren von CSS-Dateien auf die JS-Seite (obwohl TS ein Beispiel ist) **. Heutzutage werden Stile und Bilder auch auf die JS-Seite importiert, sodass ** Webpack Ziele zum Auflösen anderer Abhängigkeiten als JS und TS ** enthält. Andernfalls können Sie diese Programme nicht konvertieren, damit sie vom IE gelesen werden können. Beachten Sie jedoch, dass das Webpack Abhängigkeiten um JS auflöst. Bitte denken Sie, dass es wie ein Bonus ist, CSS-Import usw. zu unterstützen.

Plugin (das die Komprimierung der JS-Dateigröße nach dem Bündeln durchführen kann)

Neben dem Loader gibt es auch ein Plugin. Ein Plugin im Webpack unterscheidet sich von einem Loader. Der Loader führt die Vorverarbeitung durch, während das Plugin die Verarbeitung nach dem Bündeln durchführen kann, dh nachdem es zu einer JS-Datei geworden ist. Zum Beispiel wird das Reduzieren der Dateigröße des generierten JS als ** minify ** bezeichnet, und ich denke, dass das Terser-Webpack-Plugin als Plug-In bekannt ist, das diese Minimierung durchführt.

Klicken Sie hier, um eine Liste der Plugins anzuzeigen. auf der offiziellen Webpack-Website.

Verwendung von Loader und Plugin

Wenn Sie ** raw webpack anstelle von webpacker ** verwenden, fügen Sie zuerst den Loader oder das Plugin, das Sie verwenden möchten, mit yarn add oder npm install zu Ihrem Projekt hinzu (wie die JS-Version der Bundle-Installation). ist). Legen Sie anschließend in der Webpack-Konfigurationsdatei wie "webpack.config.js" fest, was und wie verwendet werden soll. Dieser Artikel soll Ihnen einen Überblick geben, daher werde ich nicht näher auf die Einrichtung eingehen. Siehe einen anderen Artikel oder die offizielle Webpack-Seite. Die offizielle Seite ist ebenfalls in Englisch, es gibt jedoch einige Einführungsmethoden. (Zum Beispiel terser-webpack-plugin)

Zusammenfassung der Möglichkeiten von Webpack

Ich werde es einmal zusammenfassen.

--webpack kann require und import lösen und die Dateien so zusammenstellen, dass sie vom IE gelesen werden können.

Mit Loader können Sie bei der Vorverarbeitung von Webpacks auch von TypeScript nach JavaScript konvertieren.
Mit dem Plugin können Sie JS auch bei der Nachbearbeitung von Webpacks minimieren.

Natürlich können Sie verschiedene Dinge tun, indem Sie Loader und Plugin hinzufügen sowie TS kompilieren und JS minimieren, aber ich habe es hier zum leichteren Verständnis konkret geschrieben.

Was Ruby Webpacker kann

"Ich möchte nicht webpack.config.js schreiben ..."

"** Ich verstehe JS überhaupt nicht. Ich möchte nicht, dass Rails-Programmierer webpack.config.js einrichten. Bitte richten Sie es ein. Webpack.config.js selbst ist an erster Stelle schwierig ... **" Hast du jemals gedacht? Webpacker ist ein Juwel, das eine Atmosphäre schafft, die solche häufigen Probleme zu lösen scheint (ich sage nicht, dass es gelöst wird).

Webpacker macht es übrigens einfach, Webpack in Rails-Projekten zu verwenden, wie in seiner README beschrieben. Werfen wir einen Blick auf den Webpacker package.json. package.json fungiert auch als Gemfile bei der Verwaltung der npm-Pakete für Ihr Projekt. (Es gibt verschiedene andere Rollen)

`Paket im Webpaker.json`


  //Abkürzung
  "dependencies": {
    //* Es werden nur diejenigen extrahiert, die relativ leicht zu verstehen sind.
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "css-loader": "^5.0.0",
    "file-loader": "^6.1.1",
    "mini-css-extract-plugin": "^1.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss": "^8.1.3",
    "postcss-loader": "^4.0.4",
    "sass-loader": "^10.0.3",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^4.0.0",
    "webpack": "^4.44.1",
    //Abkürzung
  }

Wenn man es betrachtet, scheint es, dass verschiedene Loader (sass-loader etc.) und Plugins ( terser-webpack-plugin etc.) bereits ** bereits ** in Dependencies enthalten sind!

(Ts-loader ist zunächst nicht enthalten, aber wie Sie in der offiziellen Dokumentation des Webpackers sehen können, Bundle Es scheint einzugeben, wenn Sie einen Befehl wie exec rails webpacker eingeben: install: typescript.)

Durch Lesen der webpackerspezifischen yml-Konfigurationsdatei mit dem Namen "config / webpacker.yml" entscheidet der Webpacker, was und wie zu tun ist, und schreibt die Datei in Sie.

Wie das Verhalten von Webpacker eingestellt wird

config / webpacker.yml (mit konkretem Beispiel)

Zum Beispiel hat config / webpacker.yml ein Element namens extract_css. Wenn Sie dieses Element auf true setzen, kann CSS als von JS getrennte Datei exportiert werden.

`webpacker.yml`


production:
  <<: *default
  extract_css: true

Werfen wir einen Blick auf den Webpacker-Code, um zu sehen, was passiert, wenn extract_css wahr ist.

`Code im Webpaker`


// ...Kürzung...
const styleLoader = {
  loader: 'style-loader'
}

// ...Kürzung...
//use ist ein Array von Objekten. unshift ist eine Methode, die am Anfang eines Arrays ein Element hinzufügt.
  if (config.extract_css) {
    use.unshift(MiniCssExtractPlugin.loader)
  } else {
    use.unshift(styleLoader)
  }

Wenn "config.extract_css" wahr ist, wissen Sie, dass "MiniCssExtractPlugin.loader" als Loader gelesen wird. Da Webpack im Wesentlichen Abhängigkeiten um JS auflöst, handelt es sich im Grunde genommen um "CSS in JS". mini-css-extract-plugin ist ein npm-Paket, mit dem Sie CSS in JS CSS als einzelne CSS-Datei exportieren können. Obwohl es Plugin heißt, wird hier der Prozess zu Beginn als Loader hinzugefügt. (MiniCssExtractPlugin ist ein Plugin, muss aber auch als Loader festgelegt werden.)

Wenn andererseits false, können Sie sehen, dass am Anfang "{loader: 'style-loader'}" hinzugefügt wird. style-loader ist der Loader, der erforderlich ist, um CSS in JS tatsächlich in das DOM zu zeichnen.

Ich werde es viele Male schreiben, weil es wichtig ist, aber ** das Array von Ladern in webpack.config wird in der Reihenfolge vom letzten Lader verarbeitet **. Wenn Sie also am Anfang eines Arrays eine Einstellung hinzufügen, müssen Sie dies am Ende des Loaders tun. Wenn Sie extract_css: true setzen, können Sie sehen, dass mini-css-extract-plugin bei der endgültigen Verarbeitung des Loaders ausgeführt wird und das CSS als Ergebnis ausgeschrieben wird.

mini-css-extract-plugin befindet sich möglicherweise in Zukunft in einem anderen Paket, aber was macht webpacker.yml und wie erleichtert webpacker das Einrichten von webpack Ich denke du verstehst es.

config/webpack/environment.js

Es gibt eine andere Möglichkeit, den Webpacker zu konfigurieren. Diese Methode wird von der Webpacker-Seite bereitgestellt und beschreibt den Unterschied zur Standardeinstellung von Webpacker. Dies muss unter Berücksichtigung von webpack.config.js im Vergleich zu den Einstellungen in yml geschrieben werden. Wenn Sie beispielsweise in environment.js schreiben, können Sie am Anfang oder Ende des Loaders einen weiteren Loader hinzufügen.

Warum sollten Sie wissen, wer Webpack und Webpacker sind?

Wenn Sie das Büro frühzeitig verlassen möchten, sollten Sie es auch wissen

Wenn Sie ein Rails-Entwickler bei der Arbeit sind, sollten Sie 100% wissen. Insbesondere ** wenn die freigelassene Person es nicht weiß, besteht die Gefahr, dass sie sehr schmerzhaft ist **. Wie Sie wahrscheinlich wissen, ist Webpacker in Rails6 enthalten. Wenn ich Webpacker verwende, muss ich wissen, wie mein Code verarbeitet wird und welche Artefakte in der Produktionsumgebung bereitgestellt werden. Beispielsweise ist während oder unmittelbar nach der Produktionsbereitstellung aus irgendeinem Grund ein Fehler aufgetreten. Manchmal ist es nicht möglich, Fehler zu beheben oder die Grundursache zu beseitigen. Das Problem mit ** Webpacker ist, dass es schwieriger ist, das Problem zu identifizieren als mit rohem Webpack **. Dies liegt daran, dass es schwierig ist zu verstehen, welche Art von webpack.config letztendlich verwendet wird. 夜にコードを書く人のイラスト Ich denke nicht, dass es ein Problem ist, wenn Sie den Code als Hobby schreiben, aber wenn Sie einen Kunden haben und "Ich kann keine Fehlerbehebung bereitstellen" erhalten, wartet der Kunde auf ** Buchigire **. ..

Beispiel: Build-Artefakt ist zu groß

"Ich weiß nichts beim Erstellen von Assets: Vorkompilieren für die Produktionsbereitstellung, aber die Kompilierung ist fehlgeschlagen !!!" "Warum ist dieser Fehler!"

Error: write EPIPE
    at ChildProcess.target._send (internal/child_process.js:806:20)
    at ChildProcess.target.send (internal/child_process.js:676:19)
    at ChildProcessWorker.send (/XXX/hoge/releases/XXXXXXXXXXXXXX/node_modules/terser-webpack-plugin/node_modules/jest-worker/build/workers/ChildProcessWorker.js:299:17)

"Es scheint, dass beim" TerserPlugin "des Webpackers, der JS Minify ausführt, etwas fehlgeschlagen ist." "Es scheint ein Fehler zu sein, der auftritt, wenn der Speicher bei der Untersuchung nicht ausreicht." "Wenn ich" / var / log / messages "sehe, beendet OOM Killer den Knotenprozess." "Warum geht der Speicher zur Neige ... Gibt es keine andere Wahl, als die Serverspezifikationen nur zum Erstellen zu erhöhen ...?" "Die Build-Artefakte, die Webpack im Speicher hält, sind riesig." "Wie kann ich die Build-Artefakte effizienter verkleinern?" "Oh, es scheint, dass wenn Sie SplitChunksPlugin in das Webpack einfügen, es kleiner wird!

Beispiel: application.css existiert nicht und Fehler

"Wenn ich unmittelbar nach der Bereitstellung auf die Site zugreife, wird ein mysteriöser Fehler angezeigt und der Vollbildmodus wird nicht angezeigt !!!" "Warum ist dieser Fehler!"

ActionView::Template::Error: Webpacker can't find application.css
  in /XXX/hoge/releases/20XXXXXXXXXXXX/public/packs/manifest.json

"Es gibt keine application.css in Honma ...? Warum?" "Es scheint, dass dieses CSS immer vom" MiniCssExtractPlugin "des Webpackers implementiert wird, wenn es auf" extract_css: true "gesetzt ist." "Obwohl CSS nicht gut ist, sterbe ich beim Versuch, CSS mit" Stylesheet_pack_tag'application "auf der schmalen Seite aufzurufen." "Css wurde bisher ausgeschrieben, aber warum kam es plötzlich heraus?" "Ah, die Vue-Komponente, die zu totem Code wurde und gelöscht wurde ... Sie waren ... Das CSS wurde immer vom Webpacker geschrieben ..." "Ursprünglich war es eine große Aufgabe. Möchten Sie also" stylesheet_pack_tag'application "mit" extract_css: false "löschen?" "Einmal damit gelöst"

Sollte ich schließlich wissen, wer Webpack und Webpacker sind?

Wenn Sie Webpack bis zu einem gewissen Grad kennen, können Sie beim Erstellen von Webpacks besser Fehler beheben, wie im obigen Beispiel, und Sie können vermeiden, ein Überstunden-Krieger zu werden, da Sie nicht bereitstellen können. Sie werden beim Bereitstellen weniger Angst vor Black Boxes haben. Wenn Sie dagegen keine Kenntnisse über Webpack hatten und am Debuggen arbeiteten, würde es Tage dauern, um die Ursache des Problems zu ermitteln.

Webpacker scheint Webpack einfach zu machen, aber wenn Sie Webpack nicht gut kennen, kann es im Notfall schwierig werden. ** Webpacker vereinfacht die Einrichtung bei der Bereitstellung von Webpack, aber das bedeutet nicht, dass Sie Ihr Verständnis von Webpack aufgeben können **. Wenn Sie Webpacker weiterhin in einer Produktionsumgebung betreiben, werden Sie es sicherlich verstehen. Ich denke, eine Möglichkeit besteht darin, den Webpacker abzuziehen und das rohe Webpack zu verwenden.

abschließend

Ich hoffe, Webpack fühlt sich Ihnen etwas näher. Wenn Sie das Webpack immer noch nicht verstehen, tut mir mein Mangel an Leistung leid.

Die Geschichte von JS ist ziemlich grob vereinfacht. Abgesehen davon bin ich weder bei Microsoft noch bei der Entwicklung von ES, sodass es möglicherweise zu Ungenauigkeiten kommt. In der Realität kam dann vor dem Webpack ein weiterer Modulbündler heraus, und die JS-Grammatik hat sich seit ES2015 vollständig geändert. Zusätzlich zu den Funktionsbereichen wurden Blockbereiche herausgebracht, die jedoch vom Hauptthema abzuweichen scheinen. Ich habe es weggelassen. Danach ist das Erstellen mit Webpack nicht nur für den Internet Explorer gedacht, sondern unter HTTP / 1.1 gab es einen Vorteil hinsichtlich der Geschwindigkeit der Seitenanzeige. Jetzt, da HTTP / 2 weit verbreitet ist, kenne ich den Geschwindigkeitsvorteil nicht. Es gibt viele Orte, an denen ich der Einfachheit halber vom Weg abgekommen bin, aber ich denke, es ist "allgemein korrekt". Verzeihen Sie mir bitte, es sei denn, ich habe einen fatalen Fehler gemacht.

Lassen Sie uns mit mir Fehler beheben, während wir den Webpack-Fehler beobachten. Es ist am besten, keinen Fehler zu machen!

Referenz

https://webpack.js.org/
https://inside.pixiv.blog/subal/4615
https://blog.ojisan.io/css-loader-style-loader

[RAILS] Webpack und Webpacker, die ich Ruby-Leuten jetzt erzählen möchte