好文章自己先收藏一下,怕以後找不到。
文章轉自:http://www.cnblogs.com/wj204/p/6031435.html
前面vue2.0和webpack都已經有接觸了些(vue.js入門, webpack入門之簡單例子跑起來 ),現在開始學習如何構造自己的vue2.0+webpack環境。
1.首先新建一個目錄vue-wkdemo,這是我們的項目目錄。執行 npm init 命令生成package.json文件。執行npm init之後,會提示你填寫一些項目的信息,一直回車默認就好了,或者直接執行 npm init -y 直接跳過詢問步驟。
2.安裝項目依賴項
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 html-webpack-plugin --save-d
npm install vue --save
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
3.新建入口文件index.js,文件位置放置爲:vue-wkdemo->app->index->index.js
import Vue from 'Vue'
import Favlist from './components/Favlist.vue'
Vue.config.debug = true;//開啓錯誤提示
window.onload = function () {
new Vue({
el: '#app',
components: {
'my-component': Favlist
}
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
4.構建index.html模版,文件位置放置爲:vue-wkdemo->app->index->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>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
5.構建vue組件Favlist.vue ,文件放置爲:vue-wkdemo->app->components->Favlist.vue
<template id="template-home">
<div>
<div v-for="n in 10">div</div>
</div>
</template>
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
<style>
body {
color: red;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
6.構建 webpack.config.js ,文件放置爲:vue-wkdemo->build->webpack.config.js
// nodejs 中的path模塊
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
- 1
- 2
- 3
- 1
- 2
- 3
module.exports = {
// 入口文件,path.resolve()方法,可以結合我們給定的兩個參數最後生成絕對路徑,最終指向的就是我們的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'],
alias: {
'Vue': 'vue/dist/vue.js'
}
},
module: {
loaders: [
// 使用vue-loader 加載 .vue 結尾的文件
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel?presets=es2015',
exclude: /node_modules/
}
]
},
Favlist: {
loaders: {
js: 'babel'
}
},
plugins: [
new HtmlWebpackPlugin({
filename: '../index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
]
}
- 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
- 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
7.運行構建命令 : ‘webpack –display-modules –display-chunks –config build/webpack.config.js’
可以看到輸出文件:
8.到這裏,我們的目錄結構爲:
運行output->static->index.html這個文件,過程中遇到各種各樣的坑 (省略幾百字。。。)
最後終於看到結果了!!!
9.問題來了,每次都需要運行構建命令才能查看改變後的代碼效果,這是很沒有效率 ,於是還需要安裝 webpack-dev-middleware 中間件和 webpack-hot-middleware 中間件
npm install webpack-dev-middleware webpack-hot-middleware --save-dev
- 1
- 1
另外還需要安裝express
npm install express --save-dev
- 1
- 1
介紹下 webpack-dev-middleware 中間件,它是對webpack一個簡單的包裝,它可以通過連接服務器服務那些從webpack發射出來的文件,它有一下幾點好處:
1、不會向硬盤寫文件,而是在內存中,注意我們構建項目實際就是向硬盤寫文件。
2、當文件改變的時候,這個中間件不會再服務舊的包,你可以直接刷新瀏覽器就能看到最新的效果,這樣你就不必等待構建的時間,所見即所得。
在build目錄中創建一個dev-server.js文件,並寫入內容:
// 引入必要的模塊
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.config')
// 創建一個express實例
var app = express()
// 調用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)
// 監聽 8888端口,開啓服務器
app.listen(8888, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:8888')
})
View Code
然後我們修改 webpack.config.js 配置文件
① 將 config.output.publicPath 修改爲 ‘/‘:
// 輸出配置
output: {
// 輸出路徑是 myProject/output/static
path: path.resolve(__dirname, '../output/static'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[chunkhash].js'
},
② 將 plugins 中 HtmlWebpackPlugin 中的 filename 修改爲 ‘app/index/index.html’
plugins: [
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
]
此時,我們在項目根目錄運行下面的命令,開啓服務:
node build/dev-server.js
在瀏覽器中輸入 http://localhost:8888/app/index/index.html,如果成功了將和前面本地運行output->static->index.html這個文件的結果是一樣一樣的
不信?
爲了不去修改webpack.config.js,在build目錄下新建一個webpack.dev.conf.js文件,意思是開發模式下要讀取的配置文件,並寫入一下內容:
var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
// 引入基本配置
var config = require('./webpack.config');
config.output.publicPath = '/';
config.plugins = [
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
];
module.exports = config;
- 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
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 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
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
View Code
這樣在dev環境下的配置文件覆蓋了基本配置文件,只需要在dev-server.js中將
var config = require('./webpack.config')
- 1
- 1
改爲:
var config = require('./webpack.dev.conf')
- 1
- 1
到這裏,我們已經使用webpack-dev-middleware 搭建基本的開發環境了,但是每次修改代碼後,還是需要我們手動刷新瀏覽器,接下來介紹熱加載(所謂的熱加載,意思就是說能夠追蹤我們代碼的變化,並自動更新界面,甚至還能保留程序狀態。),我們需要 webpack-hot-middleware 中間件來完成熱加載。
配合 webpack-dev-middleware 使用,我們還需要做的是:
第一步:安裝(上面我們已經安裝過)
npm install webpack-dev-middleware --save-dev
- 1
- 1
第二步:在 webpack.dev.conf.js 配置文件中添加三個插件,如下:
var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');
config.output.publicPath = '/';
config.plugins = [
// 添加三個插件
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
];
module.exports = config;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
第三步:在 webpack.config.js 文件中入口配置中添加 ‘webpack-hot-middleware/client’,如下:
entry: ['webpack-hot-middleware/client', path.resolve(__dirname, '../app/index/index.js')],
- 1
- 1
第四步:在 dev-server.js 文件中使用插件
// 引入必要的模塊
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.conf')
// 創建一個express實例
var app = express()
// 調用webpack並把配置傳遞過去
var compiler = webpack(config)
// 使用 webpack-dev-middleware 中間件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
// 使用 webpack-hot-middleware 中間件
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// 註冊中間件
app.use(devMiddleware)
// 註冊中間件
app.use(hotMiddleware)
// 監聽 8888端口,開啓服務器
app.listen(8888, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:8888')
})
現在重啓的服務,然後修改 Favlist.vue 中的頁面顏色爲 ‘black’:
<style>
body {
color: black;
}
</style>
一保存就可以看到修改後的效果,不需要手動刷新瀏覽器啦啦啦~\(≧▽≦)/~啦啦啦。
![這裏寫圖片描述](http://img.blog.csdn.net/20161114154242623)
![這裏寫圖片描述](http://img.blog.csdn.net/20161114154255255)
剛剛修改了webpack.config.js這個基本配置文件中的入口配置,爲了不修改這個基本配置文件,我們在webpack.dev.conf.js文件中需要改下配置:
var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');
config.output.publicPath = '/';
config.plugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
];
// 動態向入口配置中注入 webpack-hot-middleware/client
var devClient = 'webpack-hot-middleware/client';
Object.keys(config.entry).forEach(function (name, i) {
var extras = [devClient]
config.entry[name] = extras.concat(config.entry[name])
})
module.exports = config;
View Code
然後將 webpack.config.js 文件中的入口配置修改爲以下配置方式:
entry: {
index: [
path.resolve(__dirname, '../app/index/index.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
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 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
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
重啓服務,修改 Favlist.vue 中的背景色,再次查看瀏覽器,發現可以熱加載。到這裏還沒結束,這裏只是監聽到Favlist.vue文件的改動,爲了能監聽到index.html文件的改動,我們還需要做一些工作。
第一步:在dev-server.js文件中監聽html文件改變事件,修改後的dev-server.js文件如下:
// 引入必要的模塊
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.conf')
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
// 創建一個express實例
var app = express()
// 調用webpack並把配置傳遞過去
var compiler = webpack(config)
// 使用 webpack-dev-middleware 中間件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// webpack插件,監聽html文件改變事件
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// 發佈事件
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// 註冊中間件
app.use(devMiddleware)
// 註冊中間件
app.use(hotMiddleware)
// 監聽 8888端口,開啓服務器
app.listen(8888, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:8888')
})
- 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
- 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
View Code
第二步:修改webpack.dev.conf.js文件
var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');
config.output.publicPath = '/';
config.plugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
];
// 動態向入口配置中注入 webpack-hot-middleware/client
// var devClient = 'webpack-hot-middleware/client';
var devClient = './build/dev-client';
Object.keys(config.entry).forEach(function (name, i) {
var extras = [devClient]
config.entry[name] = extras.concat(config.entry[name])
})
module.exports = config;
View Code
文件中修改了devClient變量,將 ‘webpack-hot-middleware/client’ 替換成 ‘./build/dev-client’,最終會導致,我們入口配置會變成下面這樣:
entry: {
index: [
'./build/dev-client',
path.resolve(__dirname, '../app/index/index.js')
]
},
第三步:新建build/dev-client.js文件,並編輯如下內容:
var hotClient = require('webpack-hot-middleware/client')
// 訂閱事件,當 event.action === 'reload' 時執行頁面刷新
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
- 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
- 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
這裏我們除了引入 ‘webpack-hot-middleware/client’ 之外訂閱了一個事件,當 event.action === ‘reload’ 時觸發,而在 dev-server.js 中有發佈的事件:
// webpack插件,監聽html文件改變事件
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// 發佈事件
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
這樣,當我們的html文件改變後,就可以監聽的到,最終會執行頁面刷新,而不需要我們手動刷新。看下效果: