So verwenden Sie Webpack zum Erstellen einer einseitigen Anwendung von vue.j

Um in dem derzeit in der Entwicklung befindlichen Projekt eine getrennte Entwicklung von Front-End und Back-End zu erreichen, haben wir uns entschieden, die gerade veröffentlichten Versionen vue.js 2.0 und koa 2.0 für die Entwicklung zu verwenden und Webpack als zu verwenden Front-End-Verpackungstool im Detail. Um es besser zu beherrschen, plane ich, mein Verständnis von Webpack durch Übungen zu stärken. Als nächstes werden wir ausführliche Übungen durchführen und eine Reihe von Artikeln über verwandte Technologien während der Entwicklung schreiben.

Der Hauptzweck dieses Artikels besteht darin, eine Zusammenfassung der Verwendung von Webpack in der Projektentwicklung und in der eigenen Praxis zu erstellen. In diesem Artikel wird erläutert, wie Sie Webpack zum Packen verwenden, wenn Sie einseitige Front-End-Anwendungen von vue.js entwickeln. Dieser Artikel ist auch eine Fortsetzung der vorherigen Artikelserie zu React.

　Als vollständige Demo wird das komplette Projekt in der Artikelserie eine einseitige Webanwendung zum Hochladen und Verwalten von Dateien implementieren

　1 Abhängigkeitspakete installieren

Wird verwendet in Das Projekt vue.js, webpack, gulp und die Open-Source-ElementUI von Ele.me werden verwendet. Da es2015 verwendet wird, muss babel eingeführt werden, um den es6-js-Code in es5 zu konvertieren.

Die Abhängigkeiten, die verwendet werden müssen, sind wie folgt

"dependencies": {
    "babel-core": "^6.18.2",
    "babel-preset-es2015": "^6.18.0",
    "config": "^1.24.0",
    "element-ui": "^1.0.0",
    "es6-promise": "^4.0.5",
    "vue": "^2.0.5",
    "vue-router": "^2.0.1"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.2.7",
    "vue-loader": "^9.8.1",
    "style-loader": "^0.13.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "gulp": "^3.9.1",
    "webpack": "^1.13.3",
  },

Darüber hinaus ist es am besten, die globale Installation für gulp-cli, webpack und babel-cli, npm install -g webpack zu verwenden , der bequem in der Befehlszeile verwendet werden kann Der Verwendungsbefehl. Darüber hinaus ist auch die Installations- und Downloadgeschwindigkeit von npm ein Kritikpunkt. Um die Geschwindigkeit der Installation abhängiger Pakete zu verbessern, kann ich cnpm oder Yarn installieren.

　2 Webpack-Konfigurationsdatei

Nach der Installation des Abhängigkeitspakets können Sie den Webpack-Befehl direkt zum Packen verwenden. Über die Konfigurationsdatei webpacke.config.js können Sie Webpack nach welchen Regeln anweisen es muss gebaut werden.

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: "./client/main.js",
    resolve: {
        extensions: ['', '.js', '.vue', '.scss','.css'],
    },
    output: {
        path: path.join(__dirname, "./build/assets/"),
        filename: '[name].[chunkhash:8].js',
        chunkFilename: '[id].js',
        publicPath: '/assets/',
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue'},
            {
                test: /\.js$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-API\//,
                loader: 'babel'
            }
        ]
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({
            names: ['bundle']
        }),
    ]
};

Beschreibung:

Eintrag: Einstiegspunkt, Webpack beginnt mit der Erstellung des Projekts aus der vom Einstiegspunkt festgelegten js-Datei. Während des Vorgangs bestehen alle Einstiegspunkte den Import oder erfordern Abhängige Pakete werden in die in der Ausgabe angegebenen Dateien und Pfade gepackt.

Ausgabe: Legen Sie den Ausgabepfad und den Dateinamen der gepackten Datei fest.

Modul: Hauptsächlich Loader Parser, die von Webpack zum Verpacken verwendet werden, müssen alle npm verwenden, um den entsprechenden Loader zu installieren, damit Webpack Dateien in diesem Format analysieren und verarbeiten kann.

Plugins: einige der Webpack-Verpackungen Plug-Ins werden unabhängig von der analysierten Sprache verwendet, um die Konstruktion zu unterstützen und umfangreiche Zusatzfunktionen bereitzustellen.

　3 Analysieren Sie die Datei

Beim Parsen abhängiger Module unterstützt Webpack ab dem Eintrag CSS, Sass und verschiedene externe Schriftartdateien. Webpack selbst verfügt nicht über alle integrierten Formate Die Verarbeitungsfähigkeit wird durch die Installation und Konfiguration verschiedener Loader erreicht. Entsprechend den tatsächlichen Anforderungen des Projekts wird der entsprechende Loader eingeführt, und Webpack kann verschiedene Anwendungen analysieren und verpacken.

Das Kompilieren von ES6-Code in ES5 wird auch durch die Installation von babel-loader erreicht. Um die Syntax von vue.js zu analysieren, das Vorlage/Skript/Stil in eine Datei einfügt, ist auch Vue-Loader erforderlich.

Durch die Verwendung von Style-Loader, CSS-Loader und Sass-Loader kann Webpack SCSS-Dateien analysieren. Wie im folgenden Beispiel gezeigt, kann die Syntax des Loaders auf viele Arten geschrieben werden:

loaders: [
    { test: /\.vue$/, loader: 'vue'},
    {
        test: /\.css$/,
        loader: "style!css"
    },
    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
    },
    {
        test: /\.js$/,
        exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: 'babel'
    },
    {
        test   : /\.(ttf|eot|svg|svg|woff|woff(2))(\?t\=[0-9]+)?$/,
        loader : 'file'
    }
]

4 benutzerdefinierte Verpackungsregeln

Verwenden Sie basierend auf den tatsächlichen Projektanforderungen einige Webpack-Plug-Ins In Kombination können leistungsstarke Funktionen erreicht werden, ohne dass Gulp oder Grunzen separat verwendet werden müssen.

4.1 Hash-Fingerabdruck generieren

Um inkrementelle Aktualisierungen der statischen Front-End-Ressourcen zu erreichen, verwenden Sie die mit Webpack gelieferte Funktion, um einen Hash-Fingerabdruck für die Bundle-Datei zu generieren, indem Sie die generierte Datei festlegen Name in der Ausgabe Regeln können verwendet werden, um Bundle-Dateien mit Hash-Fingerabdrücken zu generieren. Ein Beispiel ist wie folgt:

output:{
  ...
  //filename: '[name].[hash:8].js',
  filename: '[name].[chunkhash:8].js',
  //filename: '[name].[contenthash:8].js',
  ...
}

Webpack stellt drei Generierungsregeln für Hash/Chunkhash/Contenthash bereit; die 8 in [hash:8] ist die Anzahl der Ziffern im Hash.

Hash: Berechnen Sie den Hash-Wert basierend auf dem Kompilierungsprozess, der der Ressource zur Kompilierungszeit entspricht.

Chunkhash: Berechnen Sie den Hash-Wert basierend auf dem Modulinhalt.

Contenthash: Berechnen der Hash-Wert basierend auf dem Inhalt der Datei

　4.2 Unabhängige JS-Abhängigkeitspakete in Anbieter packen

Wenn das Projekt JQuery, Bootstrap, Fetch oder andere JS-Dateien verwendet, die „Require“ nicht unterstützen, müssen Sie Sie können Webpack verwenden, um diese Dateien in eine separate Anbieterdatei zu packen und so die Bereitstellung und das Laden statischer Dateien zu optimieren.

Dieser Vorgang wird durch die Konfiguration im Eintrag mithilfe des CommonsChunkPlugin-Plug-Ins erreicht, das in verschiedenen Modulen verpackt ist; die Konfiguration ist wie folgt:

...

Eintrag: {

Bundle: ['./client/main.js'],

// Die Regeln sind die gleichen wie Referenz erforderlich

Anbieter: ['whatwg-fetch','jquery']

},

...

Plugins:[

neues webpack.optimize.CommonsChunkPlugin({

Namen: ['bundle','vendor']

}),

]

...

Code kopieren

　　4.3 将样式打包成独立的css文件

　　同样是因为部署的需要，我们可以使用 ExtractTextPlugin 插件，将引用到的样式打包成单独的css或其他样式文件；同样可以生成hash指纹。

...
module: {
    loaders: [
        ...
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        },
        {
            test: /\.scss$/,
            loaders: ExtractTextPlugin.extract("style-loader", "css-loader","sass-loader")
        }
        ...
    ]
},
...
plugins:[
    new ExtractTextPlugin("[name].[contenthash:8].css", {
        allChunks: true
    }),
]
...

　4.4 在html文件中引入带hash指纹的bundle文件

　　最后我们需要类似gulp-rev的功能，自动在html文件中，引入打包编译好的带hash指纹的bundle和vendor文件；这个过程可以由webpack自动完成，使用的是 HtmlWebpackPlugin 插件。如果需要对js文件进行压缩，可以使用 UglifyJsPlugin 插件，插件配置如下：

plugins:[
    ...
    new HtmlWebpackPlugin({
        title: 'My App',
        template: 'index.html',
        filename: '../index.html'
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
]

　5 配合gulp使用

　　除了使用之前的gulp-webpack插件，还可以直接在gulp中require('webpack')的方式，来配合gulp使用webpack。配置比较简单

webpack(require("./webpack.config.js"), function(err, stats) {
    if(err) throw new gutil.PluginError("webpack:build", err);
    gutil.log("[webpack:build]", stats.toString({
        colors: true
    }));
    callback();
});

6 源代码

　　最后，整个项目的源代码在 github 上；稍后的其他文章，会跟项目同时更新。

// 使用gulp调用webpack打包，打包好的代码在build目录下
npm run build 
// 运行有watch自动刷新触发webpack编译的静态服务器
// http://localhost:3333
npm run dev