在現在正在開發的專案中，為了實現前後端分離開發，決定使用剛發布不久的 vue.js 2.0 和 koa 2.0 來進行開發，深入的使用了webpack作為前端打包工具。為了更好的掌握，打算透過練習來加強對webpack的理解。接下來也會針對開發中相關的技術，做深入的練習，並且寫一系列文章。
本文主要目的是對專案開發和自己練習中對webpack的使用，做一個總結。介紹開發vue.js單一頁面前端應用程式時，如何使用webpack來打包。本文同時也是之前react系列文章的延續。
作為一個完整的Demo，系列文章中的完整項目，會實現一個文件上傳和管理的單頁Web應用
1 安裝依賴包
項目中使用了vue.js，webpack，gulp，還有了麼開源的elementUI，因為使用了es2015，所以還需要引入babel將es6的js程式碼轉換成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的安裝和下載速度也是一個飽受詬病的問題，為了提高安裝依賴套件速度，可以安裝cnpm或yarn，目前我自己使用的是cnpm。
2 webpack設定檔
安裝完依賴套件之後，就可以直接使用webpack指令進行打包，透過webpacke.config.js設定文件，指揮webpack需要依照什麼規則進行建置。
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：入口點，webpack會從入口點設置的js文件開始對項目進行構建，過程中，所有入口點通過import或者require依賴的包，都會被打包到output中製定的打包檔案與路徑；
output：中設定打包好的檔案的輸出路徑還有檔案名稱；
module：中主要是loaders，loaders是webpack進行打包的解析器，css、vue、babel、scss都需要用npm安裝對應的loader，webpack才能對該格式的檔案進行解析與處理；
plugins：是一些webpack的打包插件，跟解析的語言無關，用來輔助構建，提供豐富的附加功能。
3 對文件進行解析
在從entry開始解析依賴的模組過程中，webpack支援css、sass還有各種使用到的外部字體文件，webpack本身並沒有內置所有格式的處理能力，而是通過安裝配置不同的loader實現，根據專案的實際需要，引入對應的loader，webpack就能解析並打包不同的應用。
將es6程式碼編譯成es5，也是安裝babel-loader來實現的；要解析vue.js將template/script/style放在一個檔案中的語法，也需要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 自訂打包規則
根據實際的項目需要，結合使用一些webpack插件，就可以實現強大的功能，不需要另外使用gulp或者grunt。
4.1 產生hash指紋
為了實現前端靜態資源的增量更新，使用webpack自帶的功能，為bundle檔案產生hash指紋，透過在output中設定產生的檔案名稱的規則，就可以產生帶有hash指紋的bundle檔。範例如下：
output:{
...
//filename: '[name].[hash:8].js',
filename: '[name].[chunkhash:8].js',
//filename: '[name].[contenthash:8].js',
...
} webpack提供了hash/chunkhash/contenthash三種生成生成規則；[hash:8] 中的8是hash的位數。
hash：根據編譯時資源對應的編譯程序計算hash值
chunkhash：根據模組內容計算hash值
contenthash：根據檔案的內容計算hash值
『contenthash：根據檔案的內容計算出hash值
『contenthash：根據檔案的內容計算出依賴的
如果專案中使用到jquery、bootstrap、fetch或其他不支援require的js文件，可以透過webpack，將這些文件打包到一個單獨的vendor文件中，優化靜態文件的部署載入。
client/main.js'],
// 規則跟require引用時一致
vendor: ['whatwg-fetch','jquery']
:[
new webpack.optimize.CommonsChunkPlugin({
names: ['bundle','cdor']
]
...
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
