寫(xiě)在前面

這篇博客也是參照別人的webpack入門(mén)涵防，加上自己的一些操作，還有我在此過(guò)程中遇到的困難亡电。如果是已經(jīng)入門(mén)的或者這方面的高手届巩，請(qǐng)繞行，也請(qǐng)勿吐槽,還有文章里可能有錯(cuò)別字份乒，有些打錯(cuò)了的命令恕汇，會(huì)影響大家的進(jìn)度，也可能誤導(dǎo)大家冒嫡，所以我命令大都是截圖拇勃，一來(lái)這些命令我已經(jīng)執(zhí)行了，對(duì)的孝凌，二來(lái)為了不讓你們偷懶復(fù)制粘貼方咆，大家加油。

我們?yōu)槭裁匆獙W(xué)習(xí)webpack

首先蟀架，我們?yōu)槭裁匆獙W(xué)習(xí)前端自動(dòng)化構(gòu)建工具瓣赂，我開(kāi)始了解自動(dòng)化構(gòu)建工具的時(shí)候覺(jué)得很麻煩，要配環(huán)境片拍，還要敲命令煌集，就為了把那些文件都打包在一個(gè)叫bundle.js的文件里？那有什么意義捌省？

看了半天文檔苫纤，也沒(méi)明白到底有啥好處。于是去參照了前輩的博客纲缓。

模塊化卷拘，讓我們可以把復(fù)雜的程序細(xì)化為小的文件;

類(lèi)似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開(kāi)發(fā)語(yǔ)言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能轉(zhuǎn)換為JavaScript文件使瀏覽器可以識(shí)別祝高；

Scss栗弟，less等CSS預(yù)處理器等等。

好了工闺，現(xiàn)在我們明白乍赫，為什么要使用他了瓣蛀。

webpack工作方式

Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過(guò)一個(gè)給定的主文件（如：index.js）雷厂，Webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的所有依賴文件惋增，使用loaders處理它們，最后打包為一個(gè)（或多個(gè)）瀏覽器可識(shí)別的JavaScript文件罗侯。

正式開(kāi)始

在此之前需要安裝node的環(huán)境器腋，具體方法請(qǐng)百度溪猿。

第一步钩杰，新建 一個(gè)文件夾，這里我叫webpackstudy诊县，然后使用命令行進(jìn)入讲弄。

第二步，安裝依痊，如果你想其他的文件也可以使用避除，推薦安裝全局的，否則的話就安裝一個(gè)局部的胸嘁。

全局安裝：npm install -g webpack

安裝到項(xiàng)目目錄：npm install --save-dev webpack

這樣一串顯示完瓶摆，就安裝好了。

初始化項(xiàng)目：npm init

做完這個(gè)步驟后性宏，在你的項(xiàng)目中會(huì)出現(xiàn)這個(gè)文件

輸入npm? init這個(gè)命令之后群井，命令行會(huì)提示你輸入一系列的信息，如果不準(zhǔn)備發(fā)布的話毫胜，一直回車(chē)就行了书斜。

package.json文件已經(jīng)就緒，我們?cè)诒卷?xiàng)目中安裝Webpack作為依賴包

// 安裝Webpack

npm install --save-dev webpack

回到之前的空文件夾酵使，并在里面創(chuàng)建兩個(gè)文件夾,app文件夾和public文件夾荐吉，app文件夾用來(lái)存放原始數(shù)據(jù)和我們將寫(xiě)的JavaScript模塊，public文件夾用來(lái)存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個(gè)index.html文件）口渔。接下來(lái)我們?cè)賱?chuàng)建三個(gè)文件:

index.html?——放在public文件夾中;

Greeter.js?——放在app文件夾中;

main.js?——放在app文件夾中;

?文件夾的結(jié)構(gòu)如下：

我們?cè)趇ndex.html中寫(xiě)如下代碼样屠，他的目的是為了引入打包后的js文件bundle.js

[endif]

在Greeter.js中寫(xiě)如下代碼，這個(gè)文件的作用是缺脉，為了給index頁(yè)面創(chuàng)建結(jié)點(diǎn)并插入語(yǔ)句

[endif]

在main.js中寫(xiě)如下語(yǔ)句：

[endif]

現(xiàn)在開(kāi)始正式使用webpack來(lái)運(yùn)行我們寫(xiě)的這個(gè)項(xiàng)目

語(yǔ)法是這樣的：

webpack? {entry file}? {destination for bundled file}

（注意：不要花括號(hào)痪欲，entry? file是你的入口文件，destination?

for boundled file 是你的打包后的目標(biāo)文件）

我們這里輸入：webpack app/main.js public/bundled.js

但是我做到這一步就出現(xiàn)了問(wèn)題枪向，看看你們是不是和我一樣的報(bào)錯(cuò)勤揩，如果你們沒(méi)有我這些報(bào)錯(cuò)，直接執(zhí)行成功秘蛔，可以接著看后面的陨亡，忽略我的這些問(wèn)題傍衡，繼續(xù)的地方，下面有深紅色文字提示：

哇塞负蠕，我根據(jù)提示輸入了npm install webpack-cli -D蛙埂，再次打包，還是報(bào)這個(gè)錯(cuò)遮糖，我百度了一下绣的，發(fā)現(xiàn)是我使用了全局的打包語(yǔ)句，于是我又換了局部的打包語(yǔ)句：node_modules/.bin/webpack app/main.js public/bundle.js欲账，還是不行屡江，真的是，我明明就安裝的全局的webpack赛不，心態(tài)爆哈哈哈炸惩嘉！

于是我又繼續(xù)找，發(fā)現(xiàn)我沒(méi)有安裝全局的webpack-cli踢故，于是我又安裝了一個(gè)全局的webpack-cli文黎。語(yǔ)句如下：npm install webpack-cli -g。

走到這殿较，我又繼續(xù)打包耸峭。。淋纲。

又爆出了錯(cuò)劳闹，但是看上面明明已經(jīng)將那三個(gè)js文件構(gòu)建好了，但下面又爆紅帚戳，接下來(lái)玷或，我們繼續(xù)看看是什么原因。我發(fā)現(xiàn)好像上面的的才是關(guān)鍵的提示信息片任。它告訴我們要設(shè)置一個(gè)mode偏友。我找到一個(gè)網(wǎng)友相關(guān)的解答：

再往上翻，看我的webpack版本號(hào)对供，哦位他，我的是新的，4.1.1了产场，好像要使用新的方法鹅髓，不能再使用這種老的命令行的方式去運(yùn)行他。因此我們?cè)趙ebpackstudy文件夾下新建一個(gè)webpack.config.js文件京景。

在里面加上：

現(xiàn)在我們?cè)賮?lái)打包一次窿冯，這次不需要輸上次那些語(yǔ)句，只需要輸入一個(gè)webpack

bingoＨ丰恪Ｐ汛执桌！成功，有沒(méi)有一點(diǎn)小小的喜悅了芜赌，[if !vml]

現(xiàn)在打開(kāi)index.html

[endif]

看仰挣，我之前添加進(jìn)結(jié)點(diǎn)的那句話出現(xiàn)了吧。

如果沒(méi)有上面的問(wèn)題缠沈，直接就運(yùn)行好了膘壶，那么接著從這里往下看。

更快捷的打包方式

打開(kāi)package.json文件 洲愤，找到scripts颓芭，在里面添加那句start

現(xiàn)在我們使用npm? start來(lái)代替之前輸入的webpack

現(xiàn)在我們看他運(yùn)行的順序，我發(fā)現(xiàn)他還是去找了webpack嘛禽篱，切畜伐，感覺(jué)好沒(méi)意思啊。

耐著性子繼續(xù)往下看躺率。。万矾。

我們繼續(xù)來(lái)豐滿他的骨架悼吱。

方便調(diào)試

開(kāi)發(fā)總離不開(kāi)調(diào)試的吧？

但是我們這樣打包之后良狈，怎么知道自己哪行錯(cuò)了后添？

webpack提供了一種devtool為我么生成source? map，主要是提供一種編譯文件對(duì)應(yīng)源文件的方式薪丁。這樣就方便我們調(diào)試了啊遇西。

來(lái)看看webpack給我們提供了哪些devtool，敲黑板劃重點(diǎn)Ｑ鲜取粱檀！

綜上，我們?cè)陂_(kāi)發(fā)階段可以選擇第三個(gè)漫玄，因此我在這用第三個(gè)試試水茄蚯，如果讀者想要試試其他的，可以用稍微大型點(diǎn)的項(xiàng)目睦优，能看得出差異渗常。

打開(kāi)webpack.config.js，加上如下語(yǔ)句汗盘。

devtool:'eval-source-map'

再次打包：

可以看到皱碘，之前打包是138ms，現(xiàn)在加上這個(gè)source? map之后成了143ms隐孽。確實(shí)慢了點(diǎn)點(diǎn)點(diǎn)點(diǎn)癌椿。家凯。。

可能在較大的項(xiàng)目里才能看出區(qū)別如失。

構(gòu)建一個(gè)webpack本地服務(wù)器

哎呀绊诲，這樣每次修改代碼就要去重新打包一下項(xiàng)目，然后再去瀏覽器刷新褪贵，覺(jué)得好麻煩啊营密。

如果可以像sublime一樣造成，和谷歌一起動(dòng)態(tài)刷新是不是很酷

這個(gè)功能的實(shí)現(xiàn)基于node.js，閑話少說(shuō)，我們先安裝這個(gè)組件贮聂。

npm install --save-dev webpack-dev-server

好了安裝成功，[if !vml]

devserver是webpack的一個(gè)配置赠叼，可以看看他的配置選項(xiàng)----click? me

下面列出一些扒袖，因?yàn)槲疫@里要用一些〖吲啵【微笑臉】

[endif]

來(lái)震蒋，配置webpack.config.js

[endif]

配置好之后再去package.json中去配命令，一樣是之前的script里添加：

去命令行里運(yùn)行咯：

運(yùn)行成功之后躲庄，瀏覽器自動(dòng)跳出了我的index.html查剖，不過(guò)，這次的路徑和上次直接雙擊打開(kāi)的不同了噪窘。來(lái)瞅瞅

想試試能不能自動(dòng)刷新笋庄，恩，我去給字改個(gè)顏色倔监。

過(guò)去瀏覽器刷新直砂，行了。

還是沒(méi)啥激動(dòng)的浩习，就跟我平時(shí)使用編譯器静暂，按了ctrl+s之后去瀏覽器刷新就能生效一樣。

這篇簡(jiǎn)單入門(mén)就到這了瘦锹，當(dāng)然webpack那么流行籍嘹，使用的猿猿那么多，當(dāng)然不止這些功能弯院。他到哪里神奇辱士，你想知道嗎？哈巧了听绳，我也想知道颂碘。功能性的學(xué)習(xí)，會(huì)在之后的博客中寫(xiě)出來(lái)。想繼續(xù)學(xué)習(xí)嗎头岔？記得關(guān)注我之后的博客塔拳，我會(huì)繼續(xù)學(xué)習(xí)，并繼續(xù)跟進(jìn)博客峡竣。