So konfigurieren Sie Webpack 4 mit VueJS: Eine vollständige Anleitung

Webpack & Vue Logos

Ich habe gerade einen neuen Job bei einem jungen Startup begonnen, das seinen Frontend-Teil mit VueJS entwickelt. Als Entwickler mit Angular-Hintergrund begann ich sehr skeptisch. Ich habe VueJS jedoch aufgrund seines einfachen Verständnisses und seiner einfachen Verwendung immer mehr geschätzt. In den letzten zwei Monaten habe ich an vielen Teilen der Anwendung gearbeitet, die es mir ermöglicht haben, meine VueJS-Kenntnisse erheblich zu verbessern. Eine meiner letzten Aufgaben bestand darin, das Webpack zu aktualisieren, um das Dashboard des Unternehmens zu optimieren.

In diesem Artikel beschreibe ich eine schrittweise Anleitung zum Konfigurieren von Webpacks zur Optimierung von VueJS-Anwendungen.

Installieren Sie Projektabhängigkeiten

Erstellen Sie Ihre package.json-Datei und installieren Sie zunächst die Vue- und Webpack-Abhängigkeiten.

"Abhängigkeiten": {
  "@ babel / polyfill": "~ 7,2",
  "vue": "~ 2.6",
  "vue-router": "~ 3.0"
},
"devDependencies": {
  "@ babel / core": "~ 7.2",
  "@ babel / plugin-proposal-class-properties": "~ 7.3",
  "@ babel / plugin-proposal-decorators": "~ 7.3",
  "@ babel / plugin-proposal-json-strings": "~ 7.2",
  "@ babel / plugin-syntax-dynamic-import": "~ 7.2",
  "@ babel / plugin-syntax-import-meta": "~ 7.2",
  "@ babel / preset-env": "~ 7.3",
  "babel-loader": "~ 8.0",
  "Compression-Webpack-Plugin": "~ 2.0",
  "cross-env": "~ 5.2",
  CSS-Loader: ~ 0,28
  "freundliches-fehler-webpack-plugin": "~ 1.7",
  "html-webpack-plugin": "~ 3.2",
  "mini-css-extract-plugin": "~ 0,5",
  "node-sass": "~ 4.11",
  "optimiere-CSS-Assets-Webpack-Plugin": "~ 3.2",
  "sass-loader": "~ 7.1",
  "uglifyjs-webpack-plugin": "~ 1.2",
  "vue-loader": "~ 15.6",
  "vue-style-loader": "~ 4.1",
  "vue-template-compiler": "~ 2.6",
  "webpack": "~ 4.29",
  "webpack-bundle-analyzer": "~ 3.0",
  "webpack-cli": "~ 3.2",
  "webpack-dev-server": "~ 3.1",
  "webpack-hot-middleware": "~ 2.24",
  "webpack-merge": "~ 4.2"
}
Webpack & Babel Logos

Was ist Babel? Laut der offiziellen Website von Babel:

Babel ist eine Toolchain, die hauptsächlich zum Konvertieren von ECMAScript 2015+ -Code in eine abwärtskompatible Version von JavaScript in aktuellen und älteren Browsern oder Umgebungen verwendet wird. Hier sind die wichtigsten Dinge, die Babel für Sie tun kann:
- Syntax umwandeln
- Polyfill-Funktionen, die in Ihrer Zielumgebung fehlen (über @ babel / polyfill)
- Quellcode-Transformationen (Codemods)
- Und mehr!
Babel ist ein Compiler (Quellcode => Ausgabecode). Wie viele andere Compiler wird es in drei Schritten ausgeführt: Parsen, Transformieren und Drucken.
Jetzt macht Babel nach dem Auspacken nichts mehr. Es verhält sich im Grunde wie const babel = code => code; durch Parsen des Codes und anschließendes erneutes Generieren desselben Codes. Sie müssen Plugins hinzufügen, damit Babel etwas tun kann.
Anstelle einzelner Plugins können Sie auch eine Reihe von Plugins in einer Voreinstellung aktivieren.

.babelrc Konfiguration

{
  "Presets": [
    [
      "@ babel / preset-env",
      {
        "modules": false,
        "Ziele": {
          "Browser": ["> 1%", "letzte 2 Versionen", "nicht dh <= 8", "dh> = 11"]
        }
      }
    ]
  ],
  "Plugins": [
    "@ babel / plugin-syntax-dynamic-import",
  ]
}
  • Mit @ babel / preset-env können Sie die neueste Javascript-Version verwenden, ohne sich Gedanken darüber machen zu müssen, welche Syntaxtransformationen Sie eventuell für Ihre Zielumgebungen benötigen.
  • Plugin-Syntax-Dynamic-Import ist wichtig, um Lazy Loading nutzen zu können. Andernfalls kompiliert webpack diese Syntax nicht const AppHome = () => import ("@ / components / AppHome");

Die Basis: Gemeinsame Webpack-Konfiguration

In diesem Abschnitt werden Einstellungen definiert, die für alle Umgebungen in Ihrer Anwendung gelten: Eintragsdateien, Plugins und Loader.

Eintrag - Ein Einstiegspunkt gibt an, mit welchem ​​Modul-Webpack das interne Abhängigkeitsdiagramm erstellt werden soll. Webpack ermittelt, von welchen anderen Modulen und Bibliotheken dieser Einstiegspunkt abhängt (direkt und indirekt). Unten sind 2 verschiedene Einstiegspunkte: Polyfill und Main

Eintrag: {
  polyfill: '@ babel / polyfill',
  main: helpers.root ('src', 'main'),
}

Auflösen - Diese Optionen ändern, wie Module aufgelöst werden.

Entschlossenheit: {
  Erweiterungen: ['.js', '.vue'],
  alias: {
    'vue $': isDev? 'vue / dist / vue.runtime.js': 'vue / dist / vue.runtime.min.js',
    '@': helpers.root ('src')
  }
}
  • Erweiterungen: Ermöglichen Sie Benutzern, das Schreiben der Erweiterung beim Import zu vermeiden

Anstatt zu schreiben:

AppHome aus "../../components/AppHome.vue" importieren;

Du kannst schreiben:

AppHome aus "@ / components / AppHome" importieren;
  • Alias: Ermöglicht das einfachere Importieren oder Anfordern von Modulen

Anstatt beim Importieren relative Pfade zu verwenden ...

AppHome von "../../components/AppHome" importieren;

... Sie können den soeben erstellten Alias ​​verwenden

AppHome aus "@ / components / AppHome" importieren;

Im dist / -Ordner des vue-Pakets finden Sie viele verschiedene Builds von Vue.js. Hier ist eine Übersicht über die Unterschiede zwischen ihnen.

Erklärung verschiedener Builds

In unserem Fall wird vue auf vue.runtime.js abgebildet. Laufzeit verweist auf den Code, der für das Erstellen von Vue-Instanzen, das Rendern und Patchen von virtuellem DOM usw. verantwortlich ist. Es ist wichtig, dieses Konzept zu verstehen, da wir immer so wenig KB wie möglich an den Browser senden möchten.

Damit die Anwendung ohne den Compiler ordnungsgemäß funktioniert, dürfen Sie niemals eine Komponente mit Zeichenfolgenvorlagen deklarieren.

// Das erfordert den Compiler
neuer Vue ({
    Vorlage: '
{{hi}} ' })

… Und benutze eine Renderfunktion:

// Dies erfordert nicht den Compiler
neuer Vue ({
  render (h) {
    return h ('div', this.hi)
  }
})

Loader - Webpack ermöglicht die Verwendung von Loadern zur Vorverarbeitung von Dateien.

Modul: {
    Regeln: [
      {
        Test: /\.vue$/,
        loader: 'vue-loader',
        include: [helpers.root ('src')]
      },
      {
        Test: /\.js$/,
        Lader: 'babel-loader',
        include: [helpers.root ('src')]
      },
      {
        Test: /\.css$/,
        verwenden: [
          isDev? 'vue-style-loader': MiniCSSExtractPlugin.loader,
          {loader: 'css-loader', options: {sourceMap: isDev}},
        ]
      },
      {
        Test: /\.scss$/,
        verwenden: [
          isDev? 'vue-style-loader': MiniCSSExtractPlugin.loader,
          {loader: 'css-loader', options: {sourceMap: isDev}},
          {loader: 'sass-loader', Optionen: {sourceMap: isDev}}
        ]
      },
      {
        Test: /\.sass$/,
        verwenden: [
          isDev? 'vue-style-loader': MiniCSSExtractPlugin.loader,
          {loader: 'css-loader', options: {sourceMap: isDev}},
          {loader: 'sass-loader', Optionen: {sourceMap: isDev}}
        ]
      }
    ]
  }

Einige Webpack-Loader gehören zum Standard:

  • HTML-Dateien werden mit dem HTML-Loader geladen
  • .vue-Dateien werden mit dem vue-loader geladen
  • .js Dateien werden mit dem Babel-Loader geladen

Die Art und Weise, wie Stile geladen werden, ist unterschiedlich, je nachdem, ob Sie in der Entwicklung oder in der Produktion arbeiten:

  • .css .scss- und .sass-Dateien werden im Entwicklungsmodus mit dem vue-style-loader und im Produktionsmodus mit dem MiniCSSExtractPlugin.loader geladen. Ein heikler Punkt ist, dass Sass-Dateien mit zwei Loadern geladen werden: Sass-Loader und CSS-Loader.
  • sourceMap wird nur während der Entwicklung auf true gesetzt. Dies ist sehr wichtig, um das spätere Debuggen zu vereinfachen.

Plugins - Die Plugins-Option wird verwendet, um den Webpack-Erstellungsprozess auf verschiedene Arten anzupassen.

Plugins: [
    neues VueLoaderPlugin (),
    neues HtmlPlugin ({
      Vorlage: 'index.html',
      chunksSortMode: 'Abhängigkeit'
    })
]