webpack を使用して vue.js シングルページ アプリケーションを構築する方法

現在開発中のプロジェクトでは、フロントエンドとバックエンドの分離開発を実現するため、リリースされたばかりのvue.js 2.0とkoa 2.0を開発に使用することとし、フロントエンドとしてwebpackを使用しました。エンドパッケージングツールについて詳しく説明します。 Webpack をさらに使いこなすために、演習を通じて Webpack についての理解を深めていくつもりです。次に、詳細な演習を行い、開発中の関連テクノロジに関する一連の記事を執筆します。

この記事の主な目的は、プロジェクト開発および自身の実践におけるwebpackの使用法をまとめることです。この記事では、vue.js のシングルページ フロントエンド アプリケーションを開発する際に、パッケージ化に webpack を使用する方法を紹介します。この記事は、react に関する以前の一連の記事の続きでもあります。

完全なデモとして、一連の記事の完全なプロジェクトは、ファイルのアップロードと管理のための単一ページの Web アプリケーションを実装します

1 依存関係パッケージをインストールします

プロジェクトは vue.js、webpack、gulp、および Because theオープンソースの elementUI は es2015 を使用しており、es6 の js コードを es5 に変換するには babel を導入する必要があります。

使用しなければならない依存関係は以下のとおりです

"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",
  },

また、gulp-cli、webpack、babel-cli、npm install -g webpackのグローバルインストールを使用すると、上でコマンドを便利に使用できるようになります。コマンドライン。さらに、npm のインストールとダウンロードの速度も批判されています。依存パッケージのインストール速度を向上させるために、現在、私自身は cnpm を使用しています。

2 webpack 設定ファイル

依存パッケージをインストールした後、webpack コマンドを直接使用して、webpacke.config.js 設定ファイルを通じて、どのようなルールを構築する必要があるかを指示できます。

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']
        }),
    ]
};

>> エントリポイントで、webpack は、プロセス中に、エントリポイントがインポートを通じて依存する、または要求するすべてのパッケージがファイルとパス;

出力: パッケージ化されたファイルの出力パスとファイル名を設定します。

モジュール: 主にローダー、ローダーは webpack パッケージ化パーサー、css、vue、babel、scss がすべて必要です npm は対応するローダーをインストールします。 webpack がこの形式のファイルを解析して処理できるようにするため;

プラグイン: これらは、解析された言語とは関係のない、いくつかの webpack パッケージ化プラグインであり、構築を支援し、豊富な追加機能を提供するために使用されます。

3 ファイルを解析する

依存モジュールをエントリから解析するプロセスでは、Webpack は css、sass、および使用されるさまざまな外部フォント ファイルをサポートしていますが、Webpack 自体にはすべての形式に対する組み込みの処理機能はありませんが、別のローダーをインストールして構成します。プロジェクトの実際のニーズに応じて、対応するローダーを導入すると、Webpack はさまざまなアプリケーションを解析してパッケージ化できます。

es6 コードを es5 にコンパイルすることも、babel-loader をインストールすることで実現できます。ファイルにテンプレート/スクリプト/スタイルを配置する vue.js の構文を解析するには、vue-loader も必要です。

style-loader、css-loader、sass-loader を使用することで、webpack は scss ファイルを解析できるようになります。以下の例に示すように、ローダーの構文はさまざまな方法で記述することができます:

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 カスタマイズされたパッケージ化ルール

実際のプロジェクトのニーズに基づいて、いくつかの webpack プラグインと組み合わせることで、強力な機能を実現できますそれらを別々に使用することなく。

4.1 ハッシュフィンガープリントを生成する

フロントエンドの静的リソースの増分更新を実現するには、webpack に付属する関数を使用してバンドルファイルのハッシュフィンガープリントを生成し、出力で生成されるファイル名のルールを設定します。ハッシュフィンガープリントバンドルファイルを生成できます。例は次のとおりです:

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

Webpack は、ハッシュ/チャンクハッシュ/コンテンツハッシュの 3 つの生成ルールを提供します。[hash:8] の 8 はハッシュの桁数です。

Hash: コンパイルリソースに対応するコンパイルプロセスに基づいてハッシュ値を計算します

Chunkhash: モジュールの内容に基づいてハッシュ値を計算します

Contenthash: ファイルの内容に基づいてハッシュ値を計算します

4.2 パッケージ独立した js 依存関係パッケージをベンダーに個別に追加します

プロジェクトで jquery、bootstrap、fetch、または require をサポートしないその他の js ファイルを使用する場合、webpack を使用してこれらのファイルを別のベンダー ファイルにパッケージ化し、デプロイと読み込みを最適化できます。静的ファイル。

この操作は、別のモジュールとしてパッケージ化されている CommonsChunkPlugin プラグインを使用して、エントリ内で設定することによって実現されます。設定は次のとおりです。 './ client/main.js'],

// ルールはrequirementと同じです

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

},

.. .

プラグイン ; コードをコピーします

　　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