Webpack in Visual Studio 2015 integrieren

  • Tutorial
Webpack + vs

In diesem Artikel werde ich Ihnen erläutern, wie Sie die Arbeit mit dem Webpack in Visual Studio komfortabler gestalten können, und zwar: Automatisches Starten des Webpacks beim Öffnen eines Projekts, Bündeln, wenn Dateien geändert werden, und Benachrichtigung über Fehler auf dem Desktop.

Installation


Installieren Sie das Webpack, falls Sie es noch nicht installiert haben.

npm install webpack babel-loader babel-core --save-dev

Installieren Sie als Nächstes das Webpack Task Runner- Add-On (Tools -> Extensions & Updates).

Konfigurationsdatei


Nach der Installation des Add-Ons wird in Visual Studio eine neue Vorlage für die WebPack-Konfigurationsdatei angezeigt.

Webpack-Vorlage
Fügen Sie es unserem Projekt hinzu.

Das Boilerplate webpack.config.jssieht so aus:

"use strict";
module.exports = {
    entry: "./src/file.js",
    output: {
        filename: "./dist/bundle.js"
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: "babel-loader"
            }
        ]
    }
};

In entryden Einstiegspunkt unserer js Projekt angeben, outputzeigen an, wo das fertige Paket zu speichern.
Wenn Sie mehrere Eingabepunkte haben (z. B. Komponenten für verschiedene Seiten entwickeln), entrykönnen Sie mehrere Dateien wie folgt in diese übertragen:

    entry: {
        file1: "./src/file1.js",
        file2: "./src/file2.js"    
    }

Ändern Sie das Feld, um mehrere Bundles zu speichern output.

    output: {
        path: path.join(__dirname, "./dist"),
        filename: "[name].js"
    }

Als Ergebnis erhalten wir zwei Bündel am Ausgang: file1.jsund file2.js.

Die Grundeinstellung ist abgeschlossen. Führen Sie Run-Developmentden Task Runner aus, um sicherzustellen, dass alles funktioniert .

Webpack-Task-Runner
Da es Run-Developmentnicht bequem ist , manuell zu starten , werden wir Webpack zwingen, Änderungen in Dateien zu überwachen. Dafür hat er einen Modus --watch. Wir starten Webpack in diesem Modus jedes Mal, wenn Sie ein Projekt öffnen. Fügen Sie am Anfang eine Zeile hinzu , und Sie sind fertig. Ja so einfach!

///

webpack.config.js

Benachrichtigung über Build-Ergebnisse


Fügen Sie Warnungen zu den Ergebnissen der Baugruppe hinzu. Wir werden das WebpackNotifierPlugin verwenden .

Installieren Sie es mit dem Befehl:

npm install --save-dev webpack-notifier

Ändern Sie unsere webpack.config.jsDatei

var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
    // ...
    plugins: [
      new WebpackNotifierPlugin() 
    ]
};

Nach erfolgreicher Assemblierung wird nun die folgende Benachrichtigung auf dem Desktop angezeigt:

Erfolg aufbauen

Das ist alles Webpack hat auch Live-Reloading und Profiling, wir werden sie beim nächsten Mal prüfen.
Vielen Dank für Ihre Aufmerksamkeit.

Jetzt auch beliebt: