備注（寫這么個標(biāo)題主要是明確的吸引和我曾經(jīng)有同樣問題的人，當(dāng)我寫vue時急于求成我直接用了官方的腳手架，并沒有自己搭建，結(jié)果我只知道表面怎么用，并不知道為什么，更不知道怎么改其中的配置，幸虧官方的腳手架比較好。但是你要用react ，jquery和webpack配合時，對于一些像我一樣的入門級選手就不知所措了。尤其你要想隨心搭建框架就更別提了。在此寫下我在了解webpack上遇到坑，解決的經(jīng)驗，對于入門的你有用最好，也作為自己的一個筆記，如有錯誤請留言告知，我會非常感謝）
對于初學(xué)者首先要看入門的webpack官方網(wǎng)站學(xué)習(xí)基本功，但是由于我們想快速上手，往往上網(wǎng)找來xxx現(xiàn)成的框架，想先練習(xí)一下。但是你可能看到很多版本，現(xiàn)在我選三個不同難度的例子來分析（第一個例子）（第二個例子）（第三個例子）
你按照這些例子抄一遍你都能運行起來的，后兩個是react＋webpack項目，但是我們講的是webpack，這沒關(guān)系，只要你懂了webpack是怎么回事，以后和誰一起搭建都沒關(guān)系，主要是你懂他是怎么運行的就行。
（如果你用過grunt，gulp這些打包工具你用webpack就回上手很容易，但是在此我就當(dāng)我們從零開始。）
（一）、第一個例子，主要寫了webpack＋webpack-dev-server純原始的用法；
首先都要全局安裝webpack和webpack-dev-server；因為你要用webpack在終端進行打包編譯，而webpack-dev-server你要用它進行代理服務(wù)的功能，也要全局安裝。
1、用webpack進行編譯：webpack 會把entry.js文件編譯到新創(chuàng)的bundle.js文件中
終端中運行：webpack ./entry.js bundle.js
2、用webpack進行監(jiān)聽：webpack 能將不變的模塊進行緩存并與改變的模塊一起重新編譯輸出。
終端中運行：webpack --watch
3、安裝webpack-dev-server：（開發(fā)一個本地服務(wù)，在沒有本地服務(wù)時每次都的刷新頁面，并且是從本地打開，細(xì)節(jié)在第一個例子中可以看到）
終端中運行：webpack-dev-server
在瀏覽器中打開http://localhost:8080/webpack-dev-server/或者http://本地IP地址:8080/webpack-dev-server/（端口號默認(rèn)是8080可以修改，webpack有相應(yīng)的文檔配置）
4、webpack打包到xxx路徑下的xxx文件包
這里我們的路徑是dist，文件包叫bundle.js
在終端中運行:webpack --entry ./entry.js --output-path dist --output-file bundle.js
對于基本的webpack命令大體上我們就用到這些，下面來看第二個例子中這些命令會得到封裝，通過npm進行調(diào)用。
（二）、第二個例子，是webpack+react，用的webstorm編輯器（在此我建議各位如果對webstorm了解不深的話，請不要用webstorm運行npm安裝的大型項目，會把編輯器托死，尤其項目中有自動化測試部分，我用的是vsCode編輯器輕便，靈活。你也可以用其他更好用的，歡迎推薦給我）
這個例子的作者寫的很清楚，在此我只把它webpack運行這部分拿來做對比，其他配置建議看官方文檔；
下面這段代碼我們經(jīng)常在很多package.json文件中看見，這是為了我們讓npm給我做一個代碼運行的代理；
"scripts": {
"build":"webpack",
"dev":"webpack-dev-server --devtool eval --progress --colors --content-base build"
}
當(dāng)你運行npm run dev時其實只是類似這樣一個過程：
npm run dev -----查詢packge.json文件中dev，執(zhí)行具體命令------>webpack-dev-server --devtool eval --progress --colors --content-base build
所以這些真正的在做事情的還是第一個例子中哪些代碼，注重基礎(chǔ)，懂原理才能走的更遠(yuǎn)；
（三）、第三個例子（這位作者寫非常好，體系完整，React Starter Kit，React＋redux＋webpack＋express等還有自動化測試這部分，如果你用react可以了解一下）
首先我們看它的package.json文件中的scripts部分，他這個項目安裝了better-npm-run來優(yōu)化npm配置文件的寫法，所以我們的看betterScripts具體的配置信息
"betterScripts": {
? "compile": {"command":"node bin/compile",
? ? ? ? ? ? ? ? ? ? "env": {"DEBUG":"app:*"}
? ? ? ?},
? "start": {"command":"node bin/server",
? ? ? ? ? ? ? ? ? ? "env": {"DEBUG":"app:*"}
? ? ?},
｝
由于項目大所以我只對比webpack運行編譯這部分，其他的webpack配置部分以后會有具體說明；
這里你要啟動項目你可以在終端中運行
npm run start
這部分過程時這樣的：
npm run start------查詢packge.json文件中scripts里的start，執(zhí)行具體命令------>better-npm-run start------查詢packge.json文件中betterScripts里的start，執(zhí)行具體命令--------->
node bin/server----------node 啟動跟路徑下的bin文件夾下的server文件------------>執(zhí)行server文件中的具體配置，這個項目用了express發(fā)送服務(wù)給webpack-dev-server
所以你在終端運行npm run start，better-npm-run start（必須安裝better-npm-run），
node bin/server都是行，不管怎么配置核心不便，只是形式更便于項目的開發(fā)；
webpack-dev-server 是一個小型的Node.jsExpress服務(wù)器,它使用webpack-dev-middleware來服務(wù)于webpack的包. 它也有一個微運行時是通過Sock.js連接服務(wù)器
Express會在后臺調(diào)用http模塊（node.js的）,因為Node會自動解析依賴關(guān)系,開啟服務(wù)。
（SockJS是一個瀏覽器的JavaScript庫，它提供一個WebSocket-like對象。SockJS給你一個清晰，兼容的Javascript API，在瀏覽器和web服務(wù)器之間創(chuàng)建一個低延遲，全雙工，跨域的通信通道。）
具體了解：
webpack-dev-server
webpack（如果你沒認(rèn)真看過webpack，希望你有時間多看看）
better-npm-run（優(yōu)化npm，有助于解決跨平臺運行）
Express （豐富的 HTTP 快捷方法和任意排列組合的 Connect 中間件，讓你創(chuàng)建健壯、友好的 API 變得既快速又簡單。）
path （Node.js path模塊提供了一些用于處理文件路徑的小工具）
node文檔
