webpack學習（一）安裝和命令行、一次js/css的打包體驗及不一樣版本錯誤

1、前言

　　找了一個視頻教程開始學習webpack，跟着視頻學習，在本身的實際操做中發現，出現了不少問題。基本上都是由於版本的緣由而致使，本身看的視頻是基於webpack 1.x版，而本身如今早已經是webpack 4.X了。以爲學習仍是要以最新的來，也許之後並不會再接觸到1.x的。不過了解不一樣版本更迭的問題，也是一個學習過程，更加了解這個東西。這個文章主要是針對一次js打包體驗中出現的許多問題，更多的在於對webpack的一次認識。

2、正式使用webpack前的準備

咱們須要新建一個項目來練習webpack的打包。

　　一、利用命令行建立文件夾，進入指定目錄下新建一個文件夾。

cd vueDemo  //我平常練習的目錄
mkdir webpack-test   //新建一個名爲webpack-test文件夾

　　二、使用webpack須要在項目中安裝webpack的依賴包，因此須要一個package.json文件。

　　　　package.json裏面包括當前項目的依賴模塊、自定義的腳本任務等信息，是一個標準的npm說明文件。咱們能夠經過npm init命令自動建立這個package.json文件。

//進入webpack-test文件夾，初始化npm 
cd webpack-test 
npm init 

　　　　輸入這個命令後，會有一系列信息填寫選擇（非必須），諸如項目名稱、項目描述、描述、做者等信息，若是不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可。以下圖（一）：

           

此時項目裏便會生成package.jso文件。

3、在文件夾裏安裝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。如圖（二）：

4、嘗試打包一個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

 二者明顯的區別是對於打包後的js文件有無壓縮，開發模式是沒有壓縮的，生產模式是有壓縮過的。在開發階段有必要引入開發模式，不要代碼壓縮混淆，源碼支持調試。

配置好了之後，咱們打包就不用再寫以前的那種打包語句，直接用npm run dev 或 npm run build便可。 

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:此次打包的塊名稱。

4、嘗試將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"); 

注：

一、css-loader是爲了使webpack能處理css文件，style-loader是把css-loader處理完的文件內容在HTML中新建一個style標籤插入到html裏面。

二、loader的加載順序是從右往左。因此順序不能寫錯了。

以下圖所示：

然輸入npm run dev  打包成功。（以下圖）

爲了更直觀的查看打包後的文件是否正常使用，能夠在項目中新建一個html頁面，在其中引入打包後的js文件，而後能夠在瀏覽器中發現樣式和js都正常加載了，頁面中生成了style樣式。