一、構(gòu)建項目
1，首先新建一個目錄嗦哆，名為 myProject ，這是我們的項目根目錄婿滓。然后在根目錄下使用 ****npm init -y**** 命令老速，在我們的項目中生成 package.json 文件，因為我們的項目要有很多依賴凸主，都是通過npm來管理的橘券，而npm對于我們項目的管理，則是通過package.json文件卿吐。
2旁舰，我們新建一個叫做 app 的目錄，這個是我們頁面模塊的目錄嗡官，再在app目錄下建立一個index目錄箭窜，假設(shè)這個是首頁模塊的目錄，然后再在index目錄下建立一個 index.html 文件和 index.js 文件衍腥，分別是首頁入口html文件和主js文件磺樱，然后再在index目錄下建立一個components目錄，這個目錄用作存放首頁組件模塊的目錄婆咸，因為我們最終要實現(xiàn)組件化開發(fā)竹捉。
二、通過****npm****安裝項目依賴項在根目錄（myProject）下執(zhí)行以下命令
npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install vue --save
完成后尚骄，你的package.json應(yīng)該是這樣的：
{
"name": "myProject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^1.0.28"
},
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.14.0",
"babel-runtime": "^5.8.38",
"css-loader": "^0.25.0",
"vue-hot-reload-api": "^2.0.6",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
}
}
我們安裝了 babel 一系列包块差，用來解析ES6語法，因為我們使用ES6來開發(fā)項目，如果你不了解ES6語法憾儒，建議你看一看阮老師的教程询兴，然后我們安裝了一些loader包乃沙，比如css-loader/vue-loader等等起趾，因為webpack是使用這些指定的loader去加載指定的文件的。
另外我們還使用 npm install vue –save 命令安裝了 vue 警儒，這個就是我們要在項目中使用的vue.js训裆，我們可以直接像開發(fā)nodejs應(yīng)用一樣，直接require(‘vue’);即可蜀铲，而不需要通過script標(biāo)簽引入边琉，這一點在開發(fā)中很爽。
三记劝，編輯****html****变姨、****js****、****vue****文件**
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>首頁</title>
</head>
<body>
<!-- vue的組件以自定義標(biāo)簽的形式使用 -->
<favlist></favlist>
</body>
</html>
index.js
import Vue from 'Vue'
import Favlist from './components/Favlist'
new Vue({
el: 'body',
components: { Favlist }
})
Favlist.vue
****3****厌丑、在****components****目錄下新建一個**** Favlist.vue ****文件定欧，作為我們的第一個組件********
<template>
<div v-for="n in 10">div</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style>
html{
background: red;
}
</style>
我們在index.html中使用了自定義標(biāo)簽（即組件），然后在index.js中引入了Vue和我們的Favlist.vue組件怒竿，F(xiàn)avlist.vue文件中砍鸠，我們使用了基本的vue組件語法，最后耕驰，我們希望它運行起來爷辱，這個時候，我們就需要webpack了朦肘。
四饭弓、配置****webpack****服務(wù)**
1、在項目根目錄下新建 build 目錄媒抠，用來存放我們的構(gòu)建相關(guān)的代碼文件等
2弟断、然后在build目錄下新建 webpack.config.js 這是我們的webpack配置文件，webpack需要通過讀取你的配置领舰，進行相應(yīng)的操作夫嗓。
webpack.config.js
// nodejs 中的path模塊
var path = require('path');
module.exports = {
// 入口文件，path.resolve()方法冲秽，可以結(jié)合我們給定的兩個參數(shù)最后生成絕對路徑舍咖，最終指向的就是我們的index.js文件
entry: path.resolve(__dirname, '../app/index/index.js'),
// 輸出配置
output: {
// 輸出路徑是 myProject/output/static
path: path.resolve(__dirname, '../output/static'),
publicPath: 'static/',
filename: '[name].[hash].js',
chunkFilename: '[id].[chunkhash].js'
},
resolve: {
extensions: ['', '.js', '.vue']
},
module: {
loaders: [
// 使用vue-loader 加載 .vue 結(jié)尾的文件
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel?presets=es2015',
exclude: /node_modules/
}
]
}
}
3、構(gòu)建項目
上例中锉桑，相信你已經(jīng)看懂了我的配置排霉，入口文件是index.js文件，配置了相應(yīng)輸出民轴，然后使用 vue-loader 去加載 .vue 結(jié)尾的文件攻柠，接下來我們就可以構(gòu)建項目了球订，我們可以在命令行中執(zhí)行：
webpack --display-modules --display-chunks --config build/webpack.config.js
這個時候，我們修改 index.html 瑰钮，將輸出的js文件引入：
注意：html中的script標(biāo)簽的src路徑為你項目根目錄中生成的output->static->main.xxxxx.js,哈希值是不同的冒滩，故需要手動修改下
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>首頁</title>
</head>
<body>
<!-- vue的組件以自定義標(biāo)簽的形式使用 -->
<favlist></favlist>
<script src="../../output/static/main.ce853b65bcffc3b16328.js"></script>
</body>
</html>
此時，你的Vue已經(jīng)能夠渲染出來了浪谴。但是开睡，也有一個很嚴(yán)重的問題就是，你每次修改后苟耻，都要重新構(gòu)建項目篇恒，生成一個main.xxx.js文件，這顯然不是我們要達到的目的凶杖。而webpack也不會這么的愚蠢胁艰，所以我們需要安裝幾個webpack插件來解決這個問題
五,添加node服務(wù)，實現(xiàn)webpack的打包加載
1.首先安裝 html-webpack-plugin 插件：
在根目錄下輸入命令安裝：
npm install html-webpack-plugin --save-dev
2.修改build文件就夾的webpack.config.js文件
// nodejs 中的path模塊
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件智蝠，path.resolve()方法腾么，可以結(jié)合我們給定的兩個參數(shù)最后生成絕對路徑，最終指向的就是我們的index.js文件
entry: path.resolve(__dirname, '../app/index/index.js'),
// 輸出配置
output: {
// 輸出路徑是 myProject/output/static
path: path.resolve(__dirname, '../output/static'),
publicPath: 'static/',
filename: '[name].[hash].js',
chunkFilename: '[id].[chunkhash].js'
},
resolve: {
extensions: ['', '.js', '.vue']
},
module: {
loaders: [
// 使用vue-loader 加載 .vue 結(jié)尾的文件
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel?presets=es2015',
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: '../index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
]
}
根目錄下再次執(zhí)行構(gòu)建命令：
webpack --display-modules --display-chunks --config build/webpack.config.js
構(gòu)建完成后寻咒，應(yīng)該在輸出目錄哮翘，多出來一個index.html文件，雙擊它毛秘，代碼正確執(zhí)行饭寺，你可以打開這個文件查看一下，webpack自動幫我們引入了相應(yīng)的文件叫挟。
問題繼續(xù)來了艰匙，難道每次我們都要構(gòu)建之后才能查看運行的代碼嗎？那豈不是很沒有效率?別急
3.安裝 webpack-dev-middleware中間件和webpack-hot-middleware中間件抹恳，進行加載
1）
npm install webpack-dev-middleware webpack-hot-middleware --save-dev
2）
npm install express --save-dev
4员凝，下面我們在build目錄中創(chuàng)建一個 dev-server.js 的文件，并寫入一下內(nèi)容：
// 引入必要的模塊
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.config')
// 創(chuàng)建一個express實例
var app = express()
// 調(diào)用webpack并把配置傳遞過去
var compiler = webpack(config)
// 使用 webpack-dev-middleware 中間件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
// 注冊中間件
app.use(devMiddleware)
// 監(jiān)聽 8888端口奋献，開啟服務(wù)器
app.listen(8888, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:8888')
})
別急我們要對我們的 webpack.config.js 配置文件做兩處修改：
1）將 config.output.publicPath 修改為 ‘/‘：
2）將 plugins 中 HtmlWebpackPlugin 中的 filename 修改為 ‘a(chǎn)pp/index/index.html’
此時在項目根目錄執(zhí)行以下命令啟動服務(wù)：
命令：
node build/dev-server.js
當(dāng)看到如下提示健霹，則代表開啟服務(wù)成功了：
Listening at http://localhost:8888
Hash: 2b9c279685625d1c9154
Version: webpack 1.13.2
Time: 7888ms
Asset Size Chunks Chunk Names
main.2b9c279685625d1c9154.js 287 kB 0 [emitted] main
../index.html 439 bytes [emitted]
Child html-webpack-plugin for "../index.html":
Asset Size Chunks Chunk Names
../index.html 552 kB 0
webpack: bundle is now VALID.
服務(wù)啟動成功，接下來就可以打開瀏覽器瓶蚂，輸入：
http://localhost:8888/app/index/index.html
OK糖埋，大功告成，今天就到這里窃这，當(dāng)開啟服務(wù)后瞳别，你每次修改代碼保存后直接刷新頁面即可看到顯示。
目前為止并沒有啟動真正的熱加載模式（代碼保存后瀏覽器自動更新頁面而不需手動刷新的模式），實際因為現(xiàn)在熱加載模式開發(fā)還有很多問題祟敛，且當(dāng)項目越來越大時疤坝，延遲越來越嚴(yán)重，機器負(fù)載也很大馆铁，故還沒完善前就先不寫出來了跑揉，另外大家也可以去多探索探索！祝大家好運
