在現(xiàn)在正在開發(fā)的項(xiàng)目中，為了實(shí)現(xiàn)前后端分離開發(fā)，決定使用剛剛發(fā)布不久的vue.js 2.0和koa 2.0來進(jìn)行開發(fā)，深入的使用了webpack作為前端打包工具。為了更好的掌握，打算通過練習(xí)來加強(qiáng)對webpack的理解。接下來還會(huì)針對開發(fā)中相關(guān)的技術(shù)，做深入的練習(xí)，并且寫一系列文章。

本文主要目的是對項(xiàng)目開發(fā)和自己練習(xí)中對webpack的使用，做一個(gè)總結(jié)。介紹開發(fā)vue.js單頁面前端應(yīng)用時(shí)，如何使用webpack來打包。本文同時(shí)也是之前react系列文章的延續(xù)。

作為一個(gè)完整的Demo，系列文章中的完整項(xiàng)目，會(huì)實(shí)現(xiàn)一個(gè)文件上傳和管理的單頁面Web應(yīng)用

1 安裝依賴包

項(xiàng)目中使用了vue.js，webpack，gulp，還有餓了么開源的elementUI，因?yàn)槭褂昧薳s2015，所以還需要引入babel將es6的js代碼轉(zhuǎn)換成es5。

必須用到的依賴如下

"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的安裝和下載速度也是一個(gè)飽受詬病的問題，為了提高安裝依賴包速度，可以安裝cnpm或者yarn，目前我自己使用的是cnpm。

2 webpack配置文件

安裝完依賴包之后，就可以直接使用webpack命令進(jìn)行打包，通過webpacke.config.js配置文件，指揮webpack需要按照什么規(guī)則進(jìn)行構(gòu)建。

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

說明：
entry：入口點(diǎn)，webpack會(huì)從入口點(diǎn)設(shè)置的js文件開始對項(xiàng)目進(jìn)行構(gòu)建，過程中，所有入口點(diǎn)通過import或者require依賴的包，都會(huì)被打包到output中制定的文件和路徑；
output：中設(shè)置打包好的文件的輸出路徑還有文件名；
module：中主要是loaders，loaders是webpack進(jìn)行打包的解析器，css、vue、babel、scss都需要用npm安裝相應(yīng)的loader，webpack才能對該格式的文件進(jìn)行解析和處理；
plugins：是一些webpack的打包插件，跟解析的語言無關(guān)，用來輔助構(gòu)建，提供豐富的附加功能。

3 對文件進(jìn)行解析

在從entry開始解析依賴的模塊過程中，webpack支持css、sass還有各種使用到的外部字體文件，webpack本身并沒有內(nèi)置所有格式的處理能力，而是通過安裝配置不同的loader實(shí)現(xiàn)，根據(jù)項(xiàng)目的實(shí)際需要，引入對應(yīng)的loader，webpack就能解析并打包不同的應(yīng)用。

將es6代碼編譯成es5，也是安裝babel-loader來實(shí)現(xiàn)的；要解析vue.js將template/script/style放在一個(gè)文件中的語法，也需要vue-loader。

通過使用style-loader、css-loader、sass-loader就可以讓webpack具備解析scss文件的能力。如下面的示例中所示，loader的語法可以有多種寫法：

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 自定義打包規(guī)則

根據(jù)實(shí)際的項(xiàng)目需要，結(jié)合使用一些webpack插件，就可以實(shí)現(xiàn)強(qiáng)大的功能，不需要另外使用gulp或者grunt。

4.1 生成hash指紋

為了實(shí)現(xiàn)前端靜態(tài)資源的增量更新，使用webpack自帶的功能，為bundle文件生成hash指紋，通過在output中設(shè)置生成的文件名的規(guī)則，就可以生成帶hash指紋的bundle文件。示例如下：

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

webpack提供了hash/chunkhash/contenthash三種生成生成規(guī)則；[hash:8]中的8是hash的位數(shù)。

hash：根據(jù)編譯時(shí)資源對應(yīng)的編譯進(jìn)程計(jì)算hash值
chunkhash：根據(jù)模塊內(nèi)容計(jì)算hash值
contenthash：根據(jù)文件的內(nèi)容計(jì)算hash值

4.2 將獨(dú)立的js依賴包，單獨(dú)打包成vendor

如果項(xiàng)目中使用到j(luò)query、bootstrap、fetch或者其他不支持require的js文件，可以通過webpack，將這些文件打包到一個(gè)單獨(dú)的vendor文件中，優(yōu)化靜態(tài)文件的部署加載。

這個(gè)操作是通過在entry中進(jìn)行配置實(shí)現(xiàn)的，使用到了CommonsChunkPlugin插件，作為不同的模塊來打包；配置如下：

...
entry: {
    bundle: ['./client/main.js'],
    // 規(guī)則跟require引用時(shí)一致
    vendor: ['whatwg-fetch','jquery']
},
...
plugins:[
    new webpack.optimize.CommonsChunkPlugin({
        names: ['bundle','vendor']
    }),
]
...

4.3 將樣式打包成獨(dú)立的css文件

同樣是因?yàn)椴渴鸬男枰?，我們可以使?code>ExtractTextPlugin插件，將引用到的樣式打包成單獨(dú)的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的功能，自動(dòng)在html文件中，引入打包編譯好的帶hash指紋的bundle和vendor文件；這個(gè)過程可以由webpack自動(dòng)完成，使用的是HtmlWebpackPlugin插件。如果需要對js文件進(jìn)行壓縮，可以使用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 源代碼

最后，整個(gè)項(xiàng)目的源代碼在github上；稍后的其他文章，會(huì)跟項(xiàng)目同時(shí)更新。

// 使用gulp調(diào)用webpack打包，打包好的代碼在build目錄下
npm run build 

// 運(yùn)行有watch自動(dòng)刷新觸發(fā)webpack編譯的靜態(tài)服務(wù)器
// http://localhost:3333
npm run dev