長(zhǎng)話短說(shuō)，正在努力學(xué)習(xí)的小白一枚眶痰，下面是自己對(duì)webpack的一些總結(jié)，直接進(jìn)入主題梯啤。
故事一：走入webpack
webpack背后的故事竖伯？
覺(jué)得在前端這個(gè)行業(yè)，webpack的流行程度都超越了我們的想象，從1.0一直到3.0七婴，版本一直在不斷優(yōu)化更新祟偷，現(xiàn)在讓我為你打開著神奇的新世界的大門，嘻嘻打厘。
為啥要學(xué)會(huì)webpack打包修肠？
現(xiàn)在前端網(wǎng)頁(yè)都有著各種各樣的功能，而且而且啊户盯，JavaScript的復(fù)雜程度逐漸增加嵌施，還需要一大堆依賴包，還有各種各樣的框架莽鸭，還有其他類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語(yǔ)言艰管，也是我們目前Javascript不能直接去使用的，還要去轉(zhuǎn)化成瀏覽器能夠識(shí)別的Javascript的文件蒋川，還有scss,less這些預(yù)處理器......還有一大堆呢，所以呢撩笆，現(xiàn)代化的前端就需要WebPack的輔助了捺球。
webpack是個(gè)啥東西，似懂非懂夕冲？
WebPack可以看做是模塊打包機(jī)：它做的事情是氮兵，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Sass歹鱼，TypeScript等）泣栈，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用，還可以優(yōu)化你的項(xiàng)目弥姻。
有啥優(yōu)點(diǎn)南片？
webpack可以幫我們打包，轉(zhuǎn)換庭敦，優(yōu)化疼进。
打包？就是把我們寫的多個(gè)JavaScript文件打包成一個(gè)秧廉，減少服務(wù)器的壓力伞广。
轉(zhuǎn)換？在JavaScript基礎(chǔ)上拓展的開發(fā)語(yǔ)言轉(zhuǎn)化成瀏覽器能夠識(shí)別的普通javascript文件疼电。
優(yōu)化嚼锄？使我們的項(xiàng)目得到優(yōu)化跟性能上的提升。
wepack這玩意要怎么安裝氨尾颉区丑？
前期準(zhǔn)備：確保你電腦上安裝了node,看看官方文檔就知道怎么裝了。
webpack安裝是可以使用npm來(lái)裝的茫虽，這里我們新建一個(gè)空的練習(xí)文件夾（我這里就命名為webpack_demo,這里就看你自己情況來(lái)定）刊苍，
\\全局安裝 npm install -g webpack
注意：全局安裝是可以的既们，但是webpack官方是不推薦的。這會(huì)將您項(xiàng)目中的 webpack 鎖定到指定版本正什，但是在 webpack不同 版本的項(xiàng)目中使用的話啥纸，可能會(huì)導(dǎo)致你的項(xiàng)目構(gòu)建失敗。
安裝失敗原因：
1.可能你的node版本太低婴氮，建議到官網(wǎng)下個(gè)新的
2.可能網(wǎng)絡(luò)原因斯棒，考慮使用cnpm來(lái)安裝，使用這條命令npm install -g cnpm --registry=https://registry.npm.taobao.org主经，安裝完荣暮，你就直接使用cnpm來(lái)安裝就可以了，
3.權(quán)限問(wèn)題罩驻。
使用webpack前的準(zhǔn)備
在上述練習(xí)文件夾中創(chuàng)建一個(gè)package.json文件硼控，這是一個(gè)標(biāo)準(zhǔn)的npm說(shuō)明文件，里面蘊(yùn)含了豐富的信息初婆，包括當(dāng)前項(xiàng)目的依賴模塊拄养，自定義的腳本任務(wù)等等。在終端中使用
npm init
輸入這個(gè)命令后节吮，終端會(huì)問(wèn)你一系列諸如項(xiàng)目名稱抽高，項(xiàng)目描述，作者等信息透绩，不過(guò)不用擔(dān)心翘骂，如果你不準(zhǔn)備在npm中發(fā)布你的模塊，這些問(wèn)題的答案都不重要帚豪，回車默認(rèn)即可碳竟。
你也可以使用 npm init -y 這個(gè)參數(shù)-y就是默認(rèn)參數(shù)，直接給你生成package.json這個(gè)文件
//項(xiàng)目目錄下安裝 npm install --save-dev webpack
這里的參數(shù)–save是要保存到package.json中志鞍，dev是在開發(fā)時(shí)使用這個(gè)包瞭亮，而生產(chǎn)環(huán)境中不使用...
故事二：上手webpack做個(gè)demo
回到之前的空文件夾，并在里面創(chuàng)建兩個(gè)文件夾,dist文件夾和src文件夾固棚，src文件夾用來(lái)存放原始數(shù)據(jù)和我們將寫的JavaScript模塊统翩，dist文件夾用來(lái)存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個(gè)index.html
文件），結(jié)構(gòu)如下圖
index.html內(nèi)容如下：
index.html里面的main.js文件是不用自己新建的此洲，是由webpack給我們打包的厂汗。。
entry.js作為入口文件：
我們的第一次打包
webpack {entry file} {destination for bundled file}
{entry file}入口文件的路徑呜师，本文中就是src/main.js的路徑娶桦；
{destination for bundled file} 填寫打包后存放的路徑。
按照上面模板，我這里寫個(gè)例子：
webpack src/entry.js dist/main.js
可能有些小伙伴上文忽略了沒(méi)怎么注意衷畦，就會(huì)出現(xiàn)下圖這個(gè)
因?yàn)檫@里我自己本來(lái)全局已經(jīng)安裝了webpack,所以直接使用webpack是沒(méi)有問(wèn)題的栗涂。
寫到這里有點(diǎn)犯困，下個(gè)故事再跟大家定義配置文件祈争，腳本執(zhí)行打包斤程。謝謝大家觀看，講的不好的地方多多見諒菩混。
