這幾天在學習使用npm和webpack，各種曲折，這種坑，網上搜索了各種辦法，絕大多數的博文都是一樣的，然而並沒有卵用，有的時候真的想罵日了狗了，這是人用的開發環境嗎？想想微軟的IDE，多么的優雅，多么的親切，多么的人性化。說多了都是淚啊。
簡單記錄下來webpack打包的過程，坑太多。最可氣的是webpack版本更新過后，連它的命令api都變了。
一、先聲明下我使用的環境。
（1）node -v ： v10.15.0
（2）npm -v ： v6.4.1
二、開始說明webpack打包的基本套路。
首先你要確保你正確安裝了nodejs，因為我們要用到npm，而npm是nodejs的一個組件。
1.打包初體驗
所謂打包，說白了就是編譯，MMP的，這年頭前端都開始編譯了。我們先來做個最簡單的打包。
（1）找一個合適的路徑（隨便找一個路徑），創建一個文件夾。我是在桌面上創建的一個：wpDemo文件夾
（2）然后進入這個wpDemo目錄，在這個文件夾下按住shift + 鼠標右鍵 ，選擇菜單選項：在此處打開命令窗口。如圖所示：
（3）在命令窗口中，輸入命令：npm init。這個命令一看就知道啥意思，init，不就是初始化唄
如圖所示
接下來會有一大坨的輸出，而且會讓你輸入一些東西，這些東西你可以輸入，也可以不輸入。完全可以一路回車，表示我都用默認值，或者不予理會。這在我們初學階段是沒有任何問題的。
如果你嫌這些步驟太繁瑣，你可以使用命令：npm init -y。-y是個參數，表示yes，也就是我同意你所有項的默認值。
那么問題來了。這init是初始化什么呢？
這個命令執行完了，你會發現，原來空空如也的wpDemo文件夾下， 多了一個package.json文件。這是項目的配置文件，它非常重要，每個項目的根目錄下面，一般都有一個package.json文件，它定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。當我們用npm install 命令下載包的時候，就是根據這個配置文件，自動下載所需的模塊。
（4）接下來安裝webpack。
等等，我已經全局安裝了webpack，怎么還讓我安裝？
原因是這樣的，首先webpack會提供一些命令，比如打包命令webpack，我們需要在cmd命令窗口使用這些命令，所以必須全局安裝webpack這個包。但是到了項目里，有時候我們還會使用其他的第3方包，這些包有的就要求必須在項目里本地安裝有webpack，否則不能正常使用，比如：webpack-dev-server這個工具就是如此。
一般是這么做的，命令行的工具，一般都是全局安裝；而純粹的工具性質的包，一般都是在項目里本地安裝。
好了，執行命令吧：
npm i webpack -s -d
這里有2個參數，-s 和-d都是參數。-s就是-save的縮寫，表示寫入到 dependencies，-dev 表示寫入到 devDependencies，它的作用要把webpack添加到當前項目的依賴項里。所謂的依賴項，意思就是這個項目需要webpack這東西。就相當於你做個項目，需要使用jQuery，你就寫個<script src="./js/jQuery1.12.0"></script>，你這個網頁就依賴jQuery1.12.0這個包了。反正就是這么個意思。請看下圖。
這個就是package.json文件打開后的樣子，這個文件是以json格式存儲下了當前項目的配置信息。這里紅框框顯示的就是當前項目的依賴項。目前依賴項就1個webpack，版本是4.28.4
安裝完成后，看到wpDemo目錄下有多了2個東西，如圖：
（5）用代碼編輯器打開當前項目，我是用的VS Code。
直接在wpDemo文件夾上點右鍵，菜單選擇 ：Open With Code。
（6）在根目錄下創建一個demo.js。我就只寫了個輸出。
（7）打開VS Cdode的“終端”命令窗口，輸入打包命令，對demo.js進行打包
命令：webpack demo.js demo.bundle.js
webpack是打包命令，這條打包命令是意圖把demo.js 打包成一個叫做demo.bundle.js的文件。
但是很不幸，你會看到打包失敗的提示。如圖所示：
黃色的字是警告，這個不要命，可以暫時不管。
紅色的是ERROR，這個是錯誤，必須搞定它才行。
（8）這是什么原因呢？原因是我們用的webpack是4.+版本，跟3.+版本的api已經不一樣了，坑不坑。。。
那么如何解決呢？
更換打包命令為: webpack demo.js -o demo.bundle.js
這次不再報錯了。並且在wpDemo項目根目錄下生成了demo.bundle.js
但是仍然有黃色的警告。如圖： 
黃色部分的警告的意思是,沒有設置模式。
webpack4引入了模式,有開發模式,生產模式,無這三個狀態，我們需要去設置一下。
問題來了，在哪里設置呢？
在配置文件package.json中配置。
接下來,打開package.json。找到“scripts”這個key，給它的值添加上"dev"和"build"這兩個信息以及他們的值。如圖所示：
（9）這時候打開剛才打包過的demo.bundle.js文件，我去啊，怎么是這個鳥樣。如圖所示：
好大一坨飛機啊。為什么是這樣呢？
原因是這個打包文件是經過壓縮了。
webpack在打包的時候，有區分開發環境輸出和生產環境輸出。開發環境輸出的就是沒壓縮過的，沒壓縮過的，就跟我們自己寫的代碼一樣，有換行，有縮進，可閱讀性很好。
我們這個命令打包時沒指定是什么環境模式，所以就默認了是生產輸出，生產環境輸出的就是壓縮過的，壓縮過的文件就沒了回車換行，沒了縮進，也就成了一大坨。不過沒關系，這樣一大坨代碼雖然人看着費勁，但是瀏覽器看着是沒任何問題的，直接創建一個index.html，然后拉過去用，還是好使的，這里就不再截圖了，別告訴我用<script src="XXX"></script>這么引入js腳本你不會。
（10）介紹2個命令，對應不同環境模式的輸出
1.npm run dev(開發環境輸出的demo.js沒有壓縮)
2.npm run build (生產模式輸出的demo.js壓縮過)
這2個命令使用的是npm，不是webpack命令。
注意，這個dev和build好像在哪兒見過？？對了， 剛剛才在package.json里配置的“scripts”這一項的值就有“dev”和“build”。對，一點都不錯，就是這2個值，這2個值代表的是2個mode。
這兩個語句運行效果，就相當於執行
1.webpack --mode development
2.webpack --mode production
(11)現在運行命令：npm run dev。我們這次是指定了打包環境模式了。但是很不幸，你會發現出了一大推錯誤。如圖所示： 
看到又是一堆錯誤，你可能要崩潰了，反正當時我頭快炸了。
原因是,你輸入命令 npm run dev 的時候，會默認去項目根目錄下的src子目錄里找一個叫做index.js的文件，然后試圖把它打包，輸出成一個名為main.js的文件；並且這個main.js文件是默認存放在根目錄下的dist子目錄下。你有沒有發現我們一開始安裝webpack的時候並沒有這些個目錄生成，所以更別提什么index.js文件了。所以這些我們需要手動創建
我們先創建src文件夾。還有一個dist文件夾，存放默認的打包生成的文件。
然后在src里再創建index.js文件
接下來，再執行打包命令：npm run dev
你會發現在dist里多了一個main.js這個就是打包過后的目標文件。如圖所示：
而且，終端中也不報警告了。(*^__^*) 嘻嘻……
（12）這回再看生成的main.js文件，代碼就是跟我們平時寫的一樣的風格了。 
這時候把main.js引入到HTML頁面里，程序運行是沒任何問題的。
在學習webpack的時候，出現各種問題，更多時候是因為版本的問題,並不是你的問題， webpack 4語法相對來說比較嚴格了，根據版本去尋找解決問題的方法才更容易快速地解決問題。
三、打包指定目錄下的指定文件，並以指定的目錄和指定的文件名輸出
命令如下：webpack ./src/xxx.js -o ./dist/xxx.js --mode development。
也可以使用：npx webpack ./src/xxx.js -o ./dist/xxx.js --mode development。與上邊的命令相比，就開頭多了一個npx，關於npx，大家可以自行百度，這個簡單，不再多說了
其中src是存放源文件的目錄， dist是存放打包后輸出文件的目錄。一定要在當前項目的根目錄下創建這2個文件，名字不能變。
比如，我們在src目錄里創建mainPage.js，希望打包后輸出的文件叫 bundle.js。那么 命令應該這么寫
webpack ./src/mainPage.js -0 ./dist/bundle.js --mode development
點擊回車，等上幾秒鍾，打包完畢。結果如下圖所示：
搞定！！！