手把手 教你一步步--搭建vue腳手架,配置webpack文件

vue.png

序言

本人之前都是利用大牛們提供配置好的項目,然后在本地配置npm install,最后運行npm run dev,在這些項目基礎(chǔ)上去開發(fā)新項目;就算不利用大牛的配置項目,都是全局安裝了vue腳手架,webpack,然后npm init webpack project,就可以新建一個大部分插件,命令行配置和封裝好的項目,就可以npm install,npm run dev運行項目開始開發(fā),在開發(fā)中用到啥就配置啥。。。

可是我對項目里面webpack封裝和配置好多東西都不清楚,因為沒有深入去了解;所以我想一步步弄清楚里面的配置信息,我打算自己一步步來配置安裝搭建整個項目起來;無意中在討論群上看到分享的電子檔vue.js實戰(zhàn),是尤雨溪老師作推薦序,·梁灝老師編著;這本書籍值得推薦大家看看,特別對于我這種初學(xué)者更適合;看了梁灝老師這書籍,特別是webpack配置這章節(jié),我按著步驟學(xué)著并上手實踐,下面的內(nèi)容就是我一步步安裝配置搭建后的項目流程的一些總結(jié)與感想還有梁灝老師寫的書籍里面需要注意的知識點我也記錄下來,整理成文章,目的是有利于往后自己遺忘可以查找并同時分享給大家,希望可以幫助對于webpack+vue項目搭建的一些配置信息和步驟不太清楚的小伙伴們;若文章有寫的不好,或者有理解分析錯誤的點,請大家體諒并糾正,謝謝!

1)新建空目錄newDemo,使用npm初始化配置npm init
vw.png

說明:配置后項目里面就多了package.json文件

2)安裝webpack,輸入命令行npm install webpack --save-dev
vw2.png

安裝好后package.json多了一行webpack指令

vw3.png
3)安裝熱更新,輸入cnpm install webpack-dev-server --save-dev
vw4.png

說明:這里和往后內(nèi)容使用
cnpm是因為我本地安裝淘寶鏡像,用cnpm配置安裝命令行更快

安裝好后package.json多了一行webpack-dev-server指令

vw5.png
4)新建webpack.config,js基本配置文件,在配置文件里進行初始化
vw6.png
5)在package.json配置dev指令
vw7.png

說明:配置好這條指令后就可以在命令板中輸入npm run dev運行項目;在瀏覽器顯示的地址是默認的 :8080/;如果不想要默認,可以改端口為:在package.json文件的scripts改dev為:"webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"

6)在demo目錄下新建mainjs

在webpack.config.js配置以下內(nèi)容:入口配置和出口配置

vw9png.png

需要特別注意:dirname前面是有兩橫(我就設(shè)置了一條橫線,導(dǎo)致報錯,看似小問題,可這坑不小,因為沒留意,都找不到這bug)


vw10.png
6)繼續(xù)在項目中新建一個index.html

在index.html中設(shè)置以下內(nèi)容:(需要把main.js入口文件引入index.html文件中)


vw11.png

輸入npm run dev運行項目,下面顯示命令行是成功調(diào)用:


vw12.png

調(diào)用成功后自動打開瀏覽器顯示頁面內(nèi)容:端口默認為8080


vw13.png
7)為了測試命令行配置成功和webpack-dev-server的熱更新功能成效;

在main.js文件里修改index.html文件里面的內(nèi)容,再運行項目看看瀏覽器顯示內(nèi)容的變化情況:


vw14.png

因為配置webpack-dev-server的熱更新功能,修改后瀏覽器會自動更新修改后的內(nèi)容:(說明前面的命令行配置成功)

vw15.png

溫馨提示:每次修改項目,并沒有刷新瀏覽器,就已經(jīng)自動更新;這就是webpack-dev-serverd 熱更新功能,它是通過建立一個webSocket(H5)連接來實時響應(yīng)代碼的修改,webSocket是客戶端與瀏覽器雙向響應(yīng)

可以按f12,在瀏覽器的調(diào)試模式里查看到websocket


vw16.png
8)繼續(xù)配置webpack --progress --hide-modules

說明:生成目錄dist中的main.js,這是個打包過程


vw17.png

已經(jīng)生成dist目錄的mainjs打包文件


vw18.png
9)若用到一些css樣式,就需要用到style-loader和css-loader

配置css-loader命令行


vw19.png

配置style-loader命令行


vw20.png

配置css-loader/style-loader命令行后,在webpack.config.js配置文件里配置loader,增加對.css文件的處理


vw21.png

溫馨提示:在配置文件中的module對象的rules屬性中可以指定一系列的loaders,每個loader都必須包含test和use兩個選項,意思是當(dāng)webpack編譯過程遇到require或import語句導(dǎo)入一個為.css文件,將它通過css-loader轉(zhuǎn)換,再通過style-loader轉(zhuǎn)換,然后繼續(xù)打包;use選項的值可以是數(shù)組或字符串,如果是數(shù)組,它的編譯順序就是從后往前;

示例:

在項目目錄下新建一個style.css文件

vw22.png

然后在main.js入口文件里面用import引入:


vw23.png

瀏覽器自動更新內(nèi)容的字體樣式(啟動熱更新功能)


vw24.png

此時可以在瀏覽器可以看到css是通過js動態(tài)創(chuàng)建<style>標簽來寫入的


vw25.png

注意:上面用的方法,實際業(yè)務(wù)中,一般不用,因為項目大了樣式會很多,都放在js里太占體積,不能做緩存;所以一般會用到extract-text-webpack-plugin 的插件來把散落在各地的css提取出來,并生成一個main.css的文件,最終在index.html里通過<link>的形式加載它:

10)配置extract-text-webpack-plugin插件
vw26.png

配置插件后在package.json中有顯示配置后的extract-text-webpack-plugin命令行


vw27.png

配置好插件后也需要修改webpack.config.js配置文件為以下內(nèi)容:


vw28.png

最后在index.html中引入main.css文件(.vue為后綴的文件中的style樣式都統(tǒng)一打包在main.css文件中)

vw29.png
11)需要用到.vue為后綴的文件,則需要在webpack中使用vue-loader就可以對.vue格式的文件進行處理

需要配置以下的所有命令:例如需要用到.vue文件需要先安裝vue-loader、vue-style-loader等加載器并做配置;要使用es6語法,需要安裝babel和babel-loader等加載器(注意一條都不能配置漏,不然出現(xiàn)報錯可能影響往后的運行與配置):

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime

配置好以上的命令行,package.json添加這些命令行


vw30.png

配置以上命令行后,在webpack.config.js配置文件中設(shè)置以下內(nèi)容:


vw31.png

說明:vue-loader在編譯.vue文件時,會對<template>、<script>、<style>分別處理,所以在vue-loader選項里多了一項options來進一步對不同語言進行配置,如在對css處理時,會先通過css-loader解析,然后把處理結(jié)果再交給vue-style-loader處理

12)在demo目錄下新建.babelrc文件,并寫配置內(nèi)容,webpack會依賴配置文件用babel編譯es6代碼
vw32.png

說明提示:配置好以上的這些命令后,就可以使用.vue后綴文件進行開發(fā)了,現(xiàn)在每個.vue文件就代表一個組件,組件之間可以相互依賴

13)因為配置以上命令行,可以使用.vue后綴文件,新建app.vue文件,并且設(shè)置內(nèi)容為以下:
vw33.png

把app.vue引入入口文件main.js:


vw34.png

瀏覽器自動更新顯示:


vw35.png

在瀏覽器的調(diào)試模式中會看到div標簽中出現(xiàn)屬性data-v-xxx ,那是因為使用了<style scoped>,樣式只作用本組件中;如果去掉scoped,div標簽就沒有data-v-屬性,只是單純的普通標簽<div>文本數(shù)據(jù)</div>

vw36.png
14)在demo目錄新建component文件夾放title.vue和button.vue文件
vw50.png

然后把這兩個組件導(dǎo)入app.vue根組件中

vw51.png
15)配置url-loader和file-loader來支持圖片、字體等文件

npm install --save-dev url-loader
npm install --save-dev file-loader

配置后需要在webpack.config.js文件中配置test/loader


vw52.png

補充說明:?limit=1024表示的作用是:
當(dāng)遇到.gif、.png、.ttf等格式文件時,url-loader會把它們一起編譯到dist目錄下,“?limit=1024”是指如果這個文件小于1kb,就以base64的形式加載,不會生成一個文件

示例:

新建一個image文件夾放圖片

在app.vue根組件里面加入img標簽


vw53.png

瀏覽器自動更新顯示


vw54.png
16)項目打包,需要配置兩個打包依賴:

npm install --save-dev webpack-merge
npm install --save-dev html-webpack-plugin

配置后在目錄新建webpack.prod.config.js生產(chǎn)環(huán)境的配置文件(該文件在基本配置文件的基礎(chǔ)上擴展)

webpack.prod.config.js文件設(shè)置以下內(nèi)容:

var webpack=require('webpack');
var HtmlwebpackPlugin=require('html-webpack-plugin');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var merge=require('webpack-merge');
var webpackBaseConfig=require('./webpack.config.js');
//清空基本配置的插件列表
webpackBaseConfig.plugins=[];
module.exports=merge(webpackBaseConfig,{
output:{
publicPath:'/dist/',
// 將入口文件重命名為帶有20位hash值的唯一文件
filename:'[name].[hash].js'
},
plugins:[
new ExtractTextPlugin({
// 提取css,并重命名為帶有20位hash值的唯一文件
filename:'[name].[hash].css',
allChunks:true
}),
// 定義當(dāng)前node環(huán)境為生產(chǎn)環(huán)境
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:'"production"'
}
}),
// 壓縮js
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
// 提取模板,并保存入口html文件
new HtmlwebpackPlugin({
filename:'../index_prod.html',
template:'./index.ejs',
inject:false
})
]
});

配置打包依賴后在package.json文件里加入build的快捷腳本打包

"scripts":{
.......
“build“:"webpack --progress --hide-modules --config webpack.prod.config.js"
}

vw55.png

補充說明:上面安裝的webpack-merge模塊就是用于合并兩個webpack的配置文件,所以prod的配置是在webpack.config.js基礎(chǔ)上擴展的;靜態(tài)資源在大部分場景下都有緩存(304),更新上線后一般都希望用戶能及時地看到內(nèi)容,所以給打包后的css和js文件的名稱都加了20位的hash值,這樣文件名就唯一了,只要不對html文件設(shè)置緩存,上線后立即就可以加載最新的靜態(tài)資源。

html-webpack-plugin是用來生成html文件的,它通過template選項來讀取指定的模板index.ejs,然后輸出到filename指定的目錄,也就是demo/index_prod.html,模板index.ejs動態(tài)設(shè)置了靜態(tài)資源的路徑和文件名。

17)新建一個index.ejs,設(shè)置下面的內(nèi)容
vw56.png

補充說明:ejs是一個javascript模板庫,用來從json數(shù)據(jù)中生成html字符串,常用于node.js

18)運行npm run build,成功打包
vw60.png

npm run build 打包后的靜態(tài)資源main.css/main.js/jpg(css文件,js文件,圖片)


vw61.png

附上github(配置后的項目demo):
http://www.lxweimin.com/u/3908e601f4ec

。。。終于完結(jié),感覺碼了好久(感謝大家閱讀完到這里),以上的內(nèi)容有不對或者不好地方,歡迎指出,往后還會更新有關(guān)vue-router和vuex的文章,希望分享的文章對大家有幫助!

min.png

本文作者lilyping
越努力,越幸運
原文鏈接:http://www.lxweimin.com/u/3908e601f4ec
微信公眾號:BestLilyPing
github:https://github.com/lilyping
Demos源碼地址:https://github.com/lilyping

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容