詳解webpack4打包--新手入門（填坑）

　　這幾天在學習使用npm和webpack，各類曲折，這種坑，網上搜索了各類辦法，絕大多數的博文都是同樣的，然而並無卵用，有的時候真的想罵日了狗了，這是人用的開發環境嗎？想一想微軟的IDE，多麼的優雅，多麼的親切，多麼的人性化。說多了都是淚啊。

　　簡單記錄下來webpack打包的過程，坑太多。最可氣的是webpack版本更新事後，連它的命令api都變了。

　　1、先聲明下我使用的環境。

　　（1）node -v ： v10.15.0

　　（2）npm -v ： v6.4.1

　　2、開始說明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語法相對來講比較嚴格了，根據版本去尋找解決問題的方法才更容易快速地解決問題。

　　3、打包指定目錄下的指定文件，並以指定的目錄和指定的文件名輸出

　　命令以下：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

　　點擊回車，等上幾秒鐘，打包完畢。結果以下圖所示：

　　

　　搞定！！！