Vue.js——60分鍾webpack項目模板快速入門
browserify是一個 CommonJS風格的模塊管理和打包工具，上一篇我們簡單地介紹了Vue.js官方基於browserify構築的一套開發模板。webpack提供了和browserify類似的功能，在前端資源管理這方面，它提供了更加出色的功能。
官方基於webpack提供了兩種項目模板，分別是vue-webpack-simple模板和vue-webpack模板，今天我們將介紹官方提供的這兩種項目模板，並用vue-webpack-simple模板創建一個簡單的示例。
本文的Demo和源代碼已放到GitHub，如果您覺得內容不錯，請點個贊，或在GitHub上加個星星！
Webpack簡介
Webpack是當下最熱門的前端資源模塊化管理和打包工具，它可以將很多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源，還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載。通過loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
下圖是官方對Webpack的簡介，通過這幅圖也不難看出，一些相互依賴的模塊文件，會被打包成一個或多個js文件，可以減少HTTP的請求次數。
Webpack支持的特性：
- 支持CommonJs和AMD模塊，意思也就是我們基本可以無痛遷移舊項目。
- 串聯式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持。
- 可以通過配置或智能分析打包成多個文件，實現公共模塊或按需加載。
- 將樣式文件和圖片等靜態資源也可視為模塊進行打包。配合loader加載器，可以支持sass，less等CSS預處理器。
- 內置有source map，即使打包在一起依舊方便調試。
由於本文不是webpack的教程，所以webpack相關的一些知識還需要各位去了解。
webpack主頁：http://webpack.github.io/
環境准備
Node.js和Git是必備的工具，NPM的版本最好是3.x版本以上，NPM 3.x提供了更有效的包依賴管理。
在使用這兩種項目模板前，需要先安裝vue cli，執行以下命令安裝vue cli
npm install -g vue-cli
安裝完vue cli后，我們就可以基於vue-webpack-simple模板和vue-webpack模板創建項目了。
使用vue-webpack-simple模板
1.生成項目
在某個目錄下右鍵運行Git Bash Here，比如我的目錄是D:\VueOfficialTemplates。
在git bash下輸入以下命令：
vue init webpack-simple my-webpack-simple-demo
webpack-simple是項目模板的名稱，my-webpack-simple-demo是你要生成的項目名稱。
目錄下生成了一個文件夾my-webpack-simple-demo。
2. 項目結構說明
打開my-webpack-simple-demo文件夾，看到以下目錄結構：
文件樹結構如下：
├─.babelrc // babel配置文件
├─.gitignore
├─index.html // 主頁 ├─package.json // 項目配置文件 ├─README.md ├─webpack.config.js // webpack配置文件 ├─dist // 發布目錄 │ ├─.gitkeep ├─src // 開發目錄 │ ├─App.vue // App.vue組件 │ ├─main.js // 預編譯入口
相比於browserify-simple模板，多了一個webpack.config.js文件。
package.json
{
"name": "my-webpack-simple-demo", "description": "A Vue.js project", "author": "keepfool <crmug@outlook.com>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^1.0.0", "babel-runtime": "^6.0.0" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "cross-env": "^1.0.6", "css-loader": "^0.23.0", "file-loader": "^0.8.4", "json-loader": "^0.5.4", "url-loader": "^0.5.7", "vue-hot-reload-api": "^1.2.0", "vue-html-loader": "^1.0.0", "vue-loader": "^8.2.1", "vue-style-loader": "^1.0.0", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.0" } }
開發時依賴babel、各種loader和webpack，發布時依賴vue和babel-runtime。
scripts節點同樣定義了開發時和發布時的編譯命令，和browserify不同的是，編譯的輸入和輸出是定義在webpack.config.js文件中的。
webpack.config.js
var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\.json$/, loader: 'json' }, { test: /\.html$/, loader: 'vue-html' }, { test: /\.(png|jpg|gif|svg)$/, loader: 'url', query: { limit: 10000, name: '[name].[ext]?[hash]' } } ] }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin() ]) }
webpack.config.js內容還是比較好理解的，它采用了CommonJS的寫法，entry節點配置了編譯入口，output節點配置了輸出。
這段entry和output配置的含義是：編譯src/main.js文件，然后輸出到dist/build.js文件。
3. 安裝項目依賴
執行以下命令安裝項目依賴：
cd my-webpack-simple-demo
npm install
安裝完成后，目錄下會產生一個node_modules文件夾。
項目相關的依賴都存放在這個文件夾下了，比vue-browserify-simple項目模板的依賴要多得多。
4. 運行示例
執行以下命令運行示例：
npm run dev
打開127.0.0.1:8080，可以看到以下畫面：
注意：和browserify不同的是，執行npm run dev命令后並不會在dist目錄下生成build.js文件，開發環境下build.js是在運行內存中的。
5. 發布
執行以下命令會生成發布時的build.js，並且是經過壓縮的。
npm run build
使用vue-webpack模板
重新打開一個git bash窗口，執行以下命令：
vue init webpack my-webpack-demo
webpack是項目模板，my-webpack-demo是項目名稱。
目錄下生成了一個文件夾my-webpack-demo：
文件目錄結構如下（參考：https://vuejs-templates.github.io/webpack/structure.html）
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── index.js # test build entry file
│ │ └── karma.conf.js # test runner config file
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig.js # editor config
├── .eslintrc.js # eslint config
├── index.html # index.html template
└── package.json # build scripts and dependencies
2. 安裝依賴
執行以下兩行命令，安裝項目依賴：
cd my-webpack-demo
npm install
（安裝過程較為緩慢，需要耐心等待…）
3. 運行示例
執行以下命令運行示例：
npm run dev
打開127.0.0.1:8080，可以看到以下畫面：
4. 發布
執行以下命令生成發布：
npm run build
和vue-simple-webpack模板不同的是，所有的靜態資源，包括index.html都生成到dist目錄下了。
這意味着你可以直接拿着dist目錄去發布應用，例如在IIS下將dist目錄發布為一個網站。
vue-simple-webpack示例
昨天我們使用了vue-simple-browserify模板做了一個小示例，今天我們就用vue-simple-webpack模板完成同樣的示例。
該示例的代碼我就不貼出來了，大家可以到本文開頭的GitHub地址去下載。
總結
browserify和webpack都是打包和模塊依賴管理工具，webpack擁有比browserify更強的功能，使用哪種工具取決於你們個人的偏好、項目的要求。
毋庸置疑的是，Vue.js官方基於vue cli, browserify, webpack構築的幾個項目模板，確實能夠給我們帶來很大的便利，可以讓我們快速地投入到開發中。
在后面的篇章中，我將盡可能地基於這些項目模板來講解Vue.js的點點滴滴。