vue-webpack項目配置以及打包流程詳解

我認為如果你要用webpack打包項目，首先你需要有一個思維的轉(zhuǎn)化制轰，傳統(tǒng)來說前端項目都是從html文件為入口開始運行項目演顾，但是你使用了webpack后就不能這么想了。webpack是依賴于node環(huán)境的露氮，node是基于commonjs模塊規(guī)范以及javaScript的后臺編程框架踪古，而前端html依賴的是瀏覽器環(huán)境含长，你看這個環(huán)境都變了，如果你以瀏覽器環(huán)境的思考方式來讀懂webpack打包伏穆，是不是勢必會出現(xiàn)很多相左之處呢拘泞？所以擁有一個node基礎以及webpack基本知識很重要，但更重要的是需要node思維也可以說是后端思維去看webpack打包枕扫，今天我從vue官方推薦的webpack工程化項目來解析項目配置以及流程陪腌，我會盡全力詳細全面的解析出來，希望對大家有幫助烟瞧，有不對的地方也希望大家能多多指教诗鸭。

1.啟動

開始啟動項目，進入項目目錄同時在終端輸入npm run dev,

這串腳本會有什么作用呢燕刻？npm是node的包管理工具只泼，這串腳本執(zhí)行的具體操作會在package.json的scripts配置項里有解釋剖笙。

如圖示npm run dev 相當于直接在終端執(zhí)行webpack-dev-server --inline --progress --config build/webpack.dev.conf.js卵洗，這段代碼的意思就是啟動一個webpack服務器，同時指定打包配置的文件build/webpack.dev.conf.js.這里有同學就有疑問了弥咪，為什么需要指定打包配置文件呢过蹂？官方默認不是webpack.config.js文件嗎？其實是因為不同的環(huán)境決定的聚至，對應什么環(huán)境你需要不同的配置文件酷勺，比如說我需要上線項目，這時我就需要配置一個production環(huán)境的配置扳躬，執(zhí)行npm run build脆诉。

上圖，我們經(jīng)常在一些項目里看見有很多這樣的配置文件贷币，在這里我做一個詳細的解釋击胜。

webpack.base.conf.js:這個配置是最基本的，也就是說不管是開發(fā)生產(chǎn)或者測試環(huán)境下都需要的配置役纹，比如說解析css偶摔，打包圖片等等。

webpack.dev.conf.js：這個文件是在開發(fā)環(huán)境下獨有的配置促脉。里面一般有啟動一個webpack服務器做熱更新辰斋，監(jiān)聽文件的改變策州，自動刷新等等，這些配置有利于開發(fā)過程的操作宫仗。

webpack.prod.conf.js:生產(chǎn)環(huán)境的配置够挂，（正式環(huán)境會做一些壓縮/分包/提取公共文件的操作，簡單來說就是更全面藕夫，代碼更優(yōu)化）

webpack.test.conf.js: 測試環(huán)境的配置下硕，（有利于測試環(huán)境的包，根據(jù)具體的需求來配置）

除了以上幾個配置文件外大家還會經(jīng)持ǎ看見

webpack.ssr.js: 服務器渲染的文件

webpack.dll.js：（預編譯資源模塊梭姓，對基礎組件或者框架進行分包，有利于提升打包速度）

2.webpack.base.conf.js

打開此配置文件嫩码，我們一步步的分析誉尖。

首先看見的是require()，不知道此時會不會覺得有疑問呢铸题？之前我們說了webpack是基于node環(huán)境铡恕，node其中一個非常重要的概念就是commonjs模塊化管理工具。node支持module丢间，global探熔，require()這三個全局變量，只要你的項目有package.json文件就說明你的項目是一個node包烘挫，你就可以任意使用這三個全局變量诀艰。所以在這里看見require也就不稀奇了。在node中饮六，所有的js文件都會被單獨看成一個模塊其垄，可以通過這種方式被引用。我們來看第一行const utils = require('./utils’)卤橄，這里引用的是utils.js绿满。common.js默認省略后綴.js。在這里有一個疑問有些模塊的引入是相對路徑有的就只是一個模塊名窟扑。其實這跟common.js的模塊引入相關(guān)喇颁，只有一個模塊名的是內(nèi)置模塊，require將直接返回模塊嚎货。如果模塊是以”./”橘霎、“/”、“../”會在項目里面去查找js文件厂抖。具體的可以點擊以下鏈接（http://www.w3cbus.com/nodejs/module.html）茎毁。

2.1進入webpack.base.conf.js，基本配置文件。

以上是文件較重要的幾個部分七蜘，我稍微做一下解析谭溉，我們可以看見webpack的入口文件是main.js。webpack的入口只能是一個js文件橡卤，因為webpack只認識js與json文件扮念。一個項目最重要的就是入口，沒有入口就算你的項目再牛*碧库，也不可能運行柜与。這里我對瀏覽器入口與webpack打包入口做一個解析，防止大家暈??嵌灰。瀏覽器環(huán)境下入口是index.html文件弄匕，但是在webpack環(huán)境下我們的入口‘變了’，為什么這里要加一個引號呢沽瞭？因為這個變并不是真正的變化迁匠。你要記住的是瀏覽器環(huán)境下的入口永遠只能是html文件。這里的入口指的是webpack打包入口驹溃。最后在瀏覽器運行時的入口還是html文件城丧，html會把打包出來的js文件通過script標簽引入(后面看運行結(jié)果的源代碼)。由于webpack只認識js與json文件豌鹤，其他文件需要通過loader轉(zhuǎn)化成webpack認識的文件亡哄。其實loader的本質(zhì)就是一個函數(shù)。由于此項目是vue官方推薦的初始化項目布疙，里面涉及到的文件較少所以loader較少蚊惯，一般還需要css-loader,less-loader,raw-loader等等。

（此文件中很多語法大家可能會覺得莫名其妙拐辽，大家看webpack官網(wǎng)就能找到源頭拣挪，不要頭大喲擦酌！慢慢看你的努力是會得到回報的https://www.webpackjs.com/concepts/俱诸，官網(wǎng)）

2.2插件。

回到webpack.dev.conf.js赊舶，這一節(jié)來說一下插件配置睁搭，其實可以把插件理解成loader不能完成的都交給插件完成。以下是配置文件中使用的插件

除了以上幾個插件平時我們還會使用

UglifywebpackPlugin壓縮js

SplitChunkPlugin進行公共腳本分離

ZipWebpackPlugin:將打包出的資源生成一個zip包

ExtractTextWebpackPlugin:將css從bundle.js中單獨提取成一個css文件等等笼平。

一般這幾種插件打正式包會用上园骆。

2.3文件中的dev-server說明

熱更新，其實使用的是webpack內(nèi)置的插件webpack-dev-server(WDS).一般是在開發(fā)環(huán)境下使用寓调，增加開發(fā)效率锌唾。在開發(fā)過程中當我們修改文件后需要手動的刷新瀏覽器，很不方便。你可以webpack-dev-server 后面加上—open參數(shù)晌涕，每當啟動服務器會自動打開瀏覽器而且有修改時瀏覽器自動刷新滋捶，這樣大大的提高了開發(fā)效率。WDS還有一個比較大的優(yōu)勢輸出的文件存在內(nèi)存余黎，沒有磁盤的I/O重窟，所以說構(gòu)建速度有一個大大的提升。詳細的配置說明打開可以在webpack官網(wǎng)上去了解惧财，后期我會對WDS的原理做一個細致的解析巡扇。

2.4

__dirname: node的全局變量，表示當前文件所在的目錄名垮衷，是絕對路徑厅翔。這個函數(shù)是去獲取絕對路徑。文件多處需要使用到搀突。

2.5打包出口output

在基本配置文件中我們可以看到有一個output出口配置知给，而且出口配置跟入口配置不一樣。

filename:’[name].js’,filename表示輸出的文件名描姚，[name]這稱作為文件指紋涩赢，如何來理解呢？就是給打包的文件一個標識轩勘。舉個例子筒扒，search.js打包出來的文件是search.js,index.js就是index.js文件不會混。一般還會加上[hash],比如說[name]_[hash].js.官網(wǎng)還有很多類型的文件指紋绊寻，大家有興趣可以多了解了解花墩。

path:輸出地址，也就是說打包結(jié)束的文件放在哪里澄步。config.build.assetsRoot,來找一一下

在這里冰蘑，文件最后會輸出到根目錄的dist目錄下面。那接下來我們就來看看輸出的文件吧村缸！

以上是對開發(fā)環(huán)境的webpack配置做一個梳理祠肥，并不是一字一句來說明的，如果大家有不懂的可以在下方留言梯皿，我們一起探究探究仇箱。

3.webpack.prod.conf.js

生產(chǎn)環(huán)境文件中我們會看見也有配置output，這時有人會想webpack.base.conf.js不是已經(jīng)配置了嗎东羹？那這兩者會不會有影響呢剂桥？這是出現(xiàn)了一個秘密武器，那就是webpack-merge插件属提，作用是組合配置权逗。

仔細閱讀上圖你就知道了，prod的output會覆蓋base的output。

4.打包

如果我們想看文件打包后的效果斟薇，首先我們應將package.json中的dev配置修改為

保存火惊，我們來運行npm run dev

如果出現(xiàn)以上的頁面就說明你打包成功了，此時我們可以看到項目目錄中多了一個文件夾dist,打開dist文件夾我們可以看見正是我們剛剛打包好的兩個文件奔垦。

4.1 index.html文件

引入了打包好的app.js文件屹耐。

我們用瀏覽器打開index.html。什么都沒有顯示椿猎，查看開發(fā)者工具的network,

app.js引入失敗惶岭，引入路徑問題，

將“/”去掉犯眠，重新刷新網(wǎng)頁按灶。

內(nèi)容就出來，成功筐咧。

以上就是我對vue官方給出的依賴webpack構(gòu)建的工程化項目的一個啟動解析鸯旁，以及對配置文件做的解析，后續(xù)我會就webpack的優(yōu)化/原理/打包/流程寫一些文章量蕊。希望大家有所收獲铺罢，最后希望能跟大家能天天開心。