一、前言
找了一個視頻教程開始學習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 development", "build": "webpack --mode production" } //開發模式 --mode development //生產模式 --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:這次打包的塊名稱。
四、嘗試將css引入文件並打包
新建一個css文件，並引入js文件中，然后進行編譯。如下圖所示：
然后會提示錯誤（如下圖），我們需要一個合適的loader去處理這種文件。
webpack本身不支持css類型的文件。所以我們需要引入相應的loader。
npm install css-loader style-loader --save-dev
安裝完成之后，如果不做其他的處理，直接繼續npm run dev 依舊會報錯。因為我們雖然安裝了css-loader style-loader 但是在引入css文件的時候並沒有指定loader來處理，所以仍然會報錯。
我們需要將文件里的require("./style.css");改為:require("style-loader!css-loader!./style.css");
注：
1、css-loader是為了使webpack能處理css文件，style-loader是把css-loader處理完的文件內容在HTML中新建一個style標簽插入到html里面。
2、loader的加載順序是從右往左。所以順序不能寫錯了。
如下圖所示：
然輸入npm run dev 打包成功。（如下圖）
為了更直觀的查看打包后的文件是否正常使用，可以在項目中新建一個html頁面，在其中引入打包后的js文件，然后可以在瀏覽器中發現樣式和js都正常加載了，頁面中生成了style樣式。
