Vue.js——webpack專案模板快速入門
概述
rowserify是一個 CommonJS風格的模組管理和打包工具，上一篇我們簡單地介紹了Vue.js官方基於browserify構築的一套開發模板。
webpack提供了和browserify類似的功能，在前端資源管理這方面，它提供了更加出色的功能。
官方基於webpack提供了兩種專案模板，分別是vue-webpack-simple模板和vue-webpack模板，
今天我們將介紹官方提供的這兩種專案模板，並用vue-webpack-simple模板建立一個簡單的示例。
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主頁：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目錄釋出為一個網站。
總結
browserify和webpack都是打包和模組依賴管理工具，webpack擁有比browserify更強的功能，使用哪種工具取決於你們個人的偏好、專案的要求。
毋庸置疑的是，Vue.js官方基於vue cli, browserify, webpack構築的幾個專案模板，確實能夠給我們帶來很大的便利，可以讓我們快速地投入到開發中。