這是一系列文章，此系列所有的練習都存在了我的github倉庫中vue-webpack，在本人有了新的理解與認識之后,會對文章有不定時的更正與更新。下面是目前完成的列表：
- webpack入坑之旅（一）不是開始的開始
- webpack入坑之旅（二）loader入門
- webpack入坑之旅（三）webpack.config入門
- webpack入坑之旅（四）揚帆起航
- webpack入坑之旅（五）加載vue單文件組件
- webpack入坑之旅（六）配合vue-router實現SPA
需要什么？
在經過前面的四個練習，相信已經對於webapck有了一定的了解，現在我們就來一個綜合案例，進一步加深對於webpack的理解。
首先我們應該思考要解析.vue類型的文件，需要什么樣的東西？應該按照什么樣的步驟來？我們應該怎么去搭建這個項目？
開始
第一步：初始化項目目錄
我們需要創建如下目錄及文件夾，最終目錄結構如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
- dist
//文件生成目錄
--
//自動生成
- node_module
//自動安裝
-- ...
- src
//文件入口
-- components
//組件存放
-- app.vue
//主.vue
-- main.js
//主.js
- index.html
//主.html
- package.json
//npm 配置
- webpack.cofig.js
// webpack配置
|
第二步：安裝項目依賴
如果你上面沒有創建package.json文件的話，可以直接使用npm init來初始化我們的package.json文件的配置。
想要去編譯其他的文件比如react，coffce等等，就必須要加載很多對應的loader。要想加載一個.vue文件。當然也是同樣的道理。
建議用npm install xxx-loader --save-dev這樣的命令一條一條的敲。在命令行中，會有提示，可以幫助理解webpack的中的依賴管理關系。我的配置清單如下：
在實際項目中，json文件中不能出現注釋，在這里為了方便大家了解里面設置項的含義，就直接使用注釋的方式加載后面了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
{
"name": "05-five-vue", //項目名稱
"version": "1.0.0", //版本
"description": "vue+webapck", //描述
"main": "index.js", //主文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},
//scripts指定了運行腳本命令的npm命令行縮寫，比如這是的start指定了運行npm run start時，所要執行的命令。
"dependencies": { //項目依賴
"vue": "^1.0.18"
},
"devDependencies": { //各種各樣的loader，用來解析想相應的文件格式。要解析vue並且完成相應的功能，這些基本都是必須的。
"autoprefixer-loader": "^2.0.0",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-runtime": "^5.8.34",
"css-loader": "^0.16.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.2.0",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"vue-html-loader": "^1.2.0",
"vue-loader": "^7.2.0",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.14.0"
},
"author": "guowenfh", //作者
"license": "MIT", //開源協議
"keywords": [ //關鍵字
"vue",
"webpack"
]
}
|
如果你想省事的話，直接復制上面的devDependencies,dependencies字段，並且填寫到你的package.json文件中。然后運行npm install就會自動安裝所有的模塊以及依賴。
第三步：配置webpack
文件已經設置好了，接下來就到了我們關鍵的一步，配置webpack.config.js,清單如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
var path = require('path');
// NodeJS中的Path對象，用於處理目錄的對象，提高開發效率。
// 模塊導入
module.exports = {
// 入口文件地址，不需要寫完，會自動查找
entry:
'./src/main',
// 輸出
output: {
path: path.join(__dirname,
'./dist'),
// 文件地址，使用絕對路徑形式
filename:
'[name].js',
//[name]這里是webpack提供的根據路口文件自動生成的名字
publicPath:
'/dist/'
// 公共文件生成的地址
},
// 服務器配置相關，自動刷新!
devServer: {
historyApiFallback:
true,
hot:
false,
inline:
true,
grogress:
true,
},
// 加載器
module: {
// 加載器
loaders: [
// 解析.vue文件
{ test:
/\.vue$/, loader: 'vue' },
// 轉化ES6的語法
{ test:
/\.js$/, loader: 'babel', exclude: /node_modules/ },
// 編譯css並自動添加css前綴
{ test:
/\.css$/, loader: 'style!css!autoprefixer'},
//.scss 文件想要編譯，scss就需要這些東西！來編譯處理
//install css-loader style-loader sass-loader node-sass --save-dev
{ test:
/\.scss$/, loader: 'style!css!sass?sourceMap'},
// 圖片轉化，小於8K自動轉化為base64的編碼
{ test:
/\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
//html模板編譯？
{ test:
/\.(html|tpl)$/, loader: 'html-loader' },
]
},
// .vue的配置。需要單獨出來配置，其實沒什么必要--因為我刪了也沒保錯，不過這里就留這把，因為官網文檔里是可以有單獨的配置的。
vue: {
loaders: {
css:
'style!css!autoprefixer',
}
},
// 轉化成es5的語法
babel: {
presets: [
'es2015'],
plugins: [
'transform-runtime']
},
resolve: {
// require時省略的擴展名，如：require('module') 不需要module.js
extensions: [
'', '.js', '.vue'],
// 別名，可以直接使用別名來代表設定的路徑以及其他
alias: {
filter: path.join(__dirname,
'./src/filters'),
components: path.join(__dirname,
'./src/components')
}
},
// 開啟source-map，webpack有多種source-map，在官網文檔可以查到
devtool:
'eval-source-map'
};
|
請詳細查看這里面的設置，我這里都是很簡單的配置，在你的項目中，還可以更進一步的對於入口文件和輸出文件進行更加深入的定制。（注意：好像node-sass的包有問題，有很多人解析不了sass）
並且在這里生成的css文件還會插到js中，有時我們需要更進一步的把它獨立出來，然后在html中引入這時就會用到webpack的插件，在這里先不說（因為我暫時沒用到，沒有試驗過，好像也不麻煩，可以的話下篇再試試）
第四步：編寫代碼
接下來就是我們要展示的文件的編寫了，我直接把代碼貼上來了。
index.html：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack vue</title>
<style>
#app {
margin: 20px auto;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="dist/main.js"></script>
</body>
</html>
|
這里是main.js的內容：
|
1
2
3
4
5
6
7
8
9
|
//es6語法：
import Vue from "../node_modules/vue/dist/vue.min.js";//其實不用寫完，會自動查找。可以直接寫import Vue from "vue";
//外部引入別的庫都可以用這樣的方式，比如jquery等。。
//引入我們編寫的測試用vue文件。
import app from './components/app';
Vue.config.debug =
true;//開啟錯誤提示
new Vue(app);
|
這里是app.vue：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<script>
//es6
export default {
el:
"#app",
//data:function(){}，下面是es6寫法
data () {
return {
name:
"guowenfh",
age:
"2q1"
}
}
}
</script>
<template>
<div>
<h1>姓名：{{name}}</h1>
<h2>{{age}}</h2>
</div>
</template>
<style lang="sass">
/*一定要加lang不然無法編譯*/
/*測試一下對sass的編譯*/
$qwe:#098;
body{
h1{
color: red;
transform: translate(10%, 10%);/*測試自動添加前綴*/
}
h1:hover{
height:100px;
}
h2{
}
}
</style>
|
第五步：修改自動刷新設置
下面再單獨的再談一下關於自動刷新的實現，首先需要說明，在上一篇博客中的自動刷新實現，是有問題的。只能改變css樣式，使顏色進行變化。對於html里面的內容改變時，瀏覽器並不會自動刷新。
注意點一：
首先我們看到package.json中scripts字段中的"start": "webpack-dev-server --inline"。這里如果按照網上的方法在后面再添加上--hot的話，只會對於app.vue中的<style>標簽內的css起效果。
注意點二：
因為我們沒有加--hot，所以在webpack.cofig.js中需要對於devServer進行一些配置，如下：（主要是是hot設置為了false）。
|
1
2
3
4
5
6
|
devServer: {
historyApiFallback:
true,
hot:
false,
inline:
true,
grogress:
true,
}
|
這樣設置了之后按下保存相當於按下了F5瀏覽器整個刷新。而不是局部刷新。（如果你實現了局部刷新，並且沒有其他問題，那請教教我^_^）
注意點三：
注意package.json的loader安裝中的"vue-hot-reload-api": "^1.2.2"。它有可能是導致你不能自動刷新的凶手(我現在都沒搞明白到底該安裝，還是取消)
結束
步驟都走完了，因為在上面的package.json中已經進行了scripts項的配置。運行npm start，打開localhost:8080
可以看到設置的背景色已經出來了,去改變一下背景顏色？data？template？
看看瀏覽器會不會自動刷新？
如果你按照我的步驟，並且，npm包安裝沒有錯誤的話，應該就能成功了。
不行的話，請再仔細對照去看看有什么地方沒有編寫對吧！