一、前言

　　找了一個視訊教程開始學習webpack，跟著視訊學習，在自己的實際操作中發現，出現了很多問題。基本上都是因為版本的原因而導致，自己看的視訊是基於webpack 1.x版，而自己現在早已是webpack 4.X了。覺得學習還是要以最新的來，也許以後並不會再接觸到1.x的。不過了解不同版本更迭的問題，也是一個學習過程，更加了解這個東西。這個文章主要是針對一次js打包體驗中出現的許多問題，更多的在於對webpack的一次認識。

二、正式使用webpack前的準備

我們需要新建一個專案來練習webpack的打包。

　　1、利用命令列建立資料夾，進入指定目錄下新建一個資料夾。

cd vueDemo  //我日常練習的目錄
mkdir webpack-test   //新建一個名為webpack-test資料夾

　　2、使用webpack需要在專案中安裝webpack的依賴包，所以需要一個package.json檔案。

　　　　package.json裡面包括當前專案的依賴模組、自定義的指令碼任務等資訊，是一個標準的npm說明檔案。我們可以通過npm init命令自動建立這個package.json檔案。

//進入webpack-test資料夾，初始化npm 
cd webpack-test 
npm init 

　　　　輸入這個命令後，會有一系列資訊填寫選擇（非必須），諸如專案名稱、專案描述、描述、作者等資訊，如果不準備在npm中釋出你的模組，這些問題的答案都不重要，回車預設即可。如下圖（一）：

此時專案裡便會生成package.jso檔案。

三、在資料夾裡安裝webpack

package.json檔案已經建立好了，我們在本專案中安裝Webpack作為依賴包。Webpack可以使用npm安裝

再當前資料夾（即webpack-test）輸入以下命令：

//全域性安裝（只需要安裝一次，以後每個專案就不需要重新全域性安裝）
npm install -g webpack
//作為專案開發依賴，安裝到你的專案目錄
npm install --save-dev webpack

其中引數--save-dev的含義是代表把你的安裝包資訊寫入package.json檔案的devDependencies欄位中，包安裝在指定專案的node_modules資料夾下。

雖然已經全域性安裝了webpack ，但是我們通常還是會在專案中安裝區域性的webpack，為了安裝各自需要的模組。這樣的好處是區域性專案安裝可以讓每個專案擁有獨立的包，不受全域性包的影響，方便專案的移動、複製、打包等，保證不同版本包之間的相互依賴，這些優點是全域性安裝難以做到的。簡而言之就是，減少了對執行環境的配置工作，無論是對開發還是釋出/後續維護升級都大大減輕了工作量。

下面就是package.json檔案開啟後的樣子，以json格式儲存下了當前專案的配置資訊。目前依賴有一個webpack。如圖（二）：

四、嘗試打包一個js檔案 （4.x版本以及低版本）

 此時我們可以初步體驗一下用webpack打包一個js，因為看的視訊版本較老，所以會報一些由於版本問題而導致的錯誤（低版本的嘗試）。

開啟專案，在裡面新建一個hello.js檔案，裡面寫簡單的語句。

function first(){
    alter("第一次嘗試打包");
}

然後在命令列裡打包這個檔案 
輸入打包命令，對hello.js進行打包 。

webpack hello.js hello.bundle.js ​

　webpack是打包命令，上述打包命令的意思是：把hello.js 打包成一個叫做hello.bundle.js的檔案。

（此時雖然是按著教程來的，教程中並沒有讓我們安裝這個webpack-cli）。錯誤提示如圖（三）：

 出現這個的原因還是因為版本原因。在網上查到說：

In webpack3, webpack itself and the CLI for it used to be in the same package ,but in version4,they've separated the two to manage each of them better .

（在webpack3中，webpack本身和它的CLI都是在同一個包中，但在第四版中，為了更好的管理，將它們分開了）

而目前我的webpack用的是4.x版本，而教程上的是1.x版本。所以我們之前只安裝了webpack，對於新版本還需要我們單獨的安裝cli。

//全域性安裝
npm install webpack-cli -g ​

安裝完成後，繼續嘗試打包。依舊死心不改的用這個打包語句(當初並不知道還是會繼續報很多的錯，現在看來真的是不懂的時候最執著。)

webpack hello.js hello.bundle.js 

期待的成功並沒有出現，有了warning 和 error，都是因為版本的原因。如下圖（四）所示：

 第一個黃色警告，說沒有設定模式。 程式設計師怕啥warning，解決了error再說，著急想看看打包後的樣子。
WARNING in configuration 
The 'mode' option has not been set

第二個紅色錯誤，error in multi ./hello.js hello.bundle.js
出現這個原因是版本過低，命令已經不適用了。我目前看的視訊講解時1.x的版本，而我目前用的版本是4.x 。在webpack 4.0 之前 ，打包命令為npm hello.js hello bundle.js 
但是，如果安裝的是最新的webpack，需要使用 webpack hello.js -o hello.bundle.js 進行打包，改變語句，繼續嘗試。

 webpack hello.js -o hello.bundle.js 

儘管還是出現了warning，如下圖（五）所示。本著不怕warning的想法，看了一下專案目錄，驚喜發現已經生成了hello.bundle.js檔案。雖然有了檔案，開啟後發現檔案末尾並沒有包含hello.js的任何內容，所以還是得把warning解決了才行。 

出現這個的原因是webpack4引入了模式,有開發模式,生產模式,無這三個狀態，我們需要選擇。

解決這個warning，需要在配置檔案package.Json新增上"dev"和"build"這兩個資訊以及他們的值。

webpack4允許我們指定編譯使用開發模式還是生產模式，這由mode這個配置來控制，value為列舉值：development/production，分別對應開發模式和生產模式。（這個配置可以作為命令列的配置引數也可以作為配置檔案中的一個配置項，預設值是production，即生產模式）

命令列配置引數示例：

webpack hello.js -o hello.bundle.js --mode development

如果只是嘗試一下，這樣子其實就已經成功完成了打包，可以看到專案裡生成的hello.bundle.js。但是按著一些教程，會發現大家並沒有直接這樣做，而是去配置package.json檔案。

 配置檔案的配置項示例：

// 在package.json的script中加上dev和build
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode deveplopment",
    "build": "webpack --mode production"
  }
  //開發模式  --mode deveplopment
  //生產模式  --mode production

npm run dev​

依舊報錯，有一種無窮無盡錯誤的感覺。如下圖（六）：

錯誤原因是：
當我們輸入命令 npm run dev 的時候,會預設打包src資料夾下的index.js檔案,打包完成後是main.js檔案(放在dist),

然而我們之前只是嘗試打包一個js，並沒有全域性的概念，不知道webpack需要什麼基礎的配置。所以也沒在專案新增其他的東西，到了這一步，不得不面對。

現在我們需要手動建立；

先建立src檔案.還有一個dist檔案,存放預設的打包生成的檔案, 然後在src裡再建立index.js檔案。

建立好之後，我們再一次執行npm run dev 試著打包一次。

按著網上無數的教程，到這裡它們都成功了，然而我依舊是重複報上面的錯誤，到現在還不知道是什麼原因導致的。看到有一個部落格裡說，如果依舊出現問題，請使用下面的打包命令。也即我之前寫的命令列配置引數的語句。

所以沒辦法，我就用了我之前的命令列配置引數的語句。

    //打包指定目錄下的指定檔案，並以指定的目錄和指定的檔名輸出，路徑需要自己分清楚，
    //其中src是存放原始檔的目錄， dist是存放打包後輸出檔案的目錄。
    //命令如下：
　　webpack ./src/xxx.js -o ./dist/xxx.js --mode development
　　//也可以使用：
　　npx webpack ./src/xxx.js -o ./dist/xxx.js --mode development​
　　//與上邊的命令相比，就開頭多了一個npx，這個區別嘛，還沒理解好。

下面是我打包的操作示例：

webpack src/index.js -o hello.bundle.js --mode development​

npx webpack src/index.js -o hello.bundle.js --mode development​

其中的一些引數值:

Hash:雜湊值

Version:webpack版本

time:這次打包所花費的時間

列表資訊

Asset:指這次打包這次生成的檔案

Size:這次生成檔案的大小

Chunks:這次打包的分塊

chunk Names:這次打包的塊名稱。