第一節：webpack打包、壓縮及兼容性處理

一.前言

當我們使用vue-cli3創建項目時，會自動生成相應的webpack配置，不過明白webpack的原理和基本設置方法對我們局部修改某些webpack配置還是很有必要的；

二.為什么需要構建工具？

• 轉換ES6語法；
• 轉換JSX；
• CSS前綴補全/預處理器；
• 壓縮混淆；
• 圖片壓縮；

官方文檔

三.Webpack五個核心概念

1.入口（Entry）

入口（Entry）指示webpack以哪個文件為入口起點開始打包，分析構建內部依賴圖；

2.出口（Output）

輸出（Output）指示Webpack打包后的資源bundles輸出到哪里去，以及如何命名；

3.Loader

Loader讓Webpack能夠去處理那些非JavaScript文件（Webpack自身只理解JavaScript）

4.插件（Plugins）

插件（Plugins）可以用於執行范圍更廣的任務，插件的作用范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量等；

5.模式（Mode）

通過設置 mode 參數為 development 或 production 之中的一個，來啟用相應模式下 webpack 內置的優化；

module.exports = {
  mode: 'production'
};

• development模式：代碼本地調試和運行的環境；
• production模式：代碼優化上線運行的環境；

四.源碼倉庫

webpack系列中使用到的演示實例源碼已上傳至該倉庫：

webpack-demo

示例：

創建下圖所示的文件目錄：

其中src表示源文件目錄，存儲着webpack的入口起點文件，比如index.js；build用於webpack打包處理之后輸出的目錄，其余文件可通過執行：

可通過下列指令創建一個演示實例：

npm init//生成package.json
webpack_test //文件夾名字

一路回車取默認值生成：

隨后執行以下命令全局安裝webpack，其中的-g參數表示全局安裝，即使已經安裝過了，也沒關系。該指令會覆蓋原來的安裝並進行版本更新。

五.npm i 和 npm install 的區別

i為install的縮寫；

實際使用的區別點主要如下(windows下)：

1. 用npm i安裝的模塊無法用npm uninstall刪除，用npm uninstall i才卸載掉

2. npm i會幫助檢測與當前node版本最匹配的npm包版本號，並匹配出來相互依賴的npm包應該提升的版本號

3. 部分npm包在當前node版本下無法使用，必須使用建議版本

4. 安裝報錯時intall肯定會出現npm-debug.log 文件，npm i不一定

npm i webpack webpack-cli -g

然后在本地安裝，參數-D為--save-dev的縮寫，表示它會將webpack添加到package.json中的開發依賴中：

npm i webpack webpack-cli -D

webpack中下載的所有東西都屬於開發依賴，不屬於生產依賴，所以都使用-D。

index.js文件內容：

/*
  index.js:webpack入口起點文件

  1.運行指令：
    開發環境指令：webpack ./src/index.js -o ./build/built.js --mode=development
    翻譯：webpack會以./src/index.js為入口環境開始打包，打包后輸出 ./build/built.js；整體打包環境是開發環境；代碼不會被壓縮，可以看清楚邏輯；
    
    生產環境指令：webpack ./src/index.js -o ./build/built.js --mode=production
    翻譯：webpack會以./src/index.js為入口環境開始打包，打包后輸出 ./build/built.js；整體打包環境是生產環境；代碼會被壓縮，無法看清代碼邏輯；
*/

function add(x, y){
  return x + y
}

console.log(add(1, 2));

先進入02-webpack初體驗目錄，然后打包文件

開發環境指令：

輸入下列開發環境指令打包文件：

webpack ./src/index.js -o ./build/built.js --mode=development

輸出結果：

• 其中的Hash值代表打包的結果，每次打包都會生成一個唯一的哈希值，唯一地ID；
• 其余的有版本，打包時間，資源Asset，打包后的文件built.js的大小等；

此時build目錄下會多出一個built.js文件

生產環境指令

輸入下列生產環境指令打包文件：

webpack ./src/index.js -o ./build/built.js --mode=production

運行結果：

查看生成的build目錄下的built.js文件，發現代碼進行了壓縮：

這個代碼是可執行的：

每次src文件夾中的入口文件index.js引入了新依賴之后，都要重新進行打包，才能看到最新的結果；

也就是說只要指定了入口文件index.js，就可以在index.js中通過import引入很多依賴文件，這樣

webpack在打包入口文件index.js的時候就會根據其中引入關系，一起打包index.js的依賴文件；

那么引入其他文件呢？

比如在index.js中引入css文件的時候：

會出現打包錯誤，打包出來的built.js中的該部分會丟出一個錯誤：

得出結論：

• webpack能處理js/json資源，不能處理css/img等資源；
• 生產環境和開發環境將ES6模塊化編譯成瀏覽器能識別的模塊化；
• 生產環境（production）比開發環境（development）多了一個壓縮js代碼；

六.打包樣式資源

雖然webpack不能直接打包css文件，但是可以借助於各種各樣的Loader將webpack不能識別的文件轉換成它能識別的格式；

需要在根目錄的package.json.js文件中進行配置：

整體配置為：

const { resolve } = require('path')

module.exports= {
  entry: './src/index.js',
   //輸出:這是一個對象，里面有兩個東西。filename表示輸出的文件名,path表示輸出的路徑,寫路徑的時候通常會寫一個絕對路徑，避免出錯。絕對路徑會引入一個nodejs的path模塊
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules:[ 
      {
      //詳細loader配置
        //匹配哪些文件
        test: /\.css$/,
        //處理這些文件
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    //詳細plugins配置
  ],
  mode: 'development',
  //mode: 'production'
 }

首先， webpack.json.js為webpack的配置文件。作用為：指示webpack干哪些活(當運行webpack指令時，要加載哪些配置)；

所有構建工具都是基於node.js平台運行的，模塊化默認采用commonjs。可以看到commonjs會導出一個對象，在該對象中寫webpack的配置：

1.入口起點

  entry: './src/index.js'

表示打包的入口文件為src目錄下的index.js文件；

2.輸出

  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
   }

這是一個對象，其中：

• filename表示輸出的文件名；

• path表示輸出的路徑；

• 寫路徑的時候為了避免出錯，通常會寫一個絕對路徑。需要引入一個nodejs的模塊path模塊：

  const { resolve } = require('path')
  

  其中的resolve是用來拼接絕對路徑的方法，格式為：

   path: resolve(__dirname, 'build')
  

  傳入兩個參數：__dirname和當前的build目錄；其中__dirname是nodejs的變量，它代表當前文件（指webpack.config.js）的目錄的絕對路徑：

• 該絕對路徑就是03-打包樣式資源，也就是說__dirname的值就是03-打包樣式資源，拼接上build，再加上第一個參數filename指明的built.js一起表示，打包后輸出到build目錄下的built.js文件中；

3.Loader配置

module: {
  rules: {
  	//詳細loader配置
  }
}

4.插件（plugins）

  plugins: [
    //詳細plugins配置
  ],

5.模式

  mode: 'development',
  //mode: 'production'

開發模式development和生產模式production兩種模式選一種，不能同時寫；

6.打包樣式資源

可以使用css-loader來翻譯css文件：

module: {
    rules: [ 
        {
            //詳細loader配置
            //使用正則表示式指定匹配哪些文件
            test: /\.css$/,//該正則表達式表明，匹配以css結尾的文件，\為轉義符
            //通過test的正則表達式匹配了文件后，這里指定使用哪些loader進行處理
            use: [
                //需要使用兩個loader
                //作用：創建style標簽，將js中的樣式資源插入進去，添加到head中生效
                'style-loader',
                //將css文件轉換成一個commonjs模塊並加載到js中，里面內容是樣式字符串
                'css-loader'
            ]       
        }
    ]
}

注意：rules屬性是一個數組，里面的每一個元素都為對象，每個對象匹配並處理一類文件。並且對象中的use屬性也是一個數組，其中loader的執行順序為：從右到左，從下到上依次執行。為了不用每次都安裝同樣的依賴文件包，可以在根目錄執行下列指令安裝這些包，因為子目錄中找不到包會依次往根目錄找：

npm init //生成package.json
npm i webpack webpack-cli -D //下載webpack包，-D是--save-dev的縮寫，表示是開發時依賴
npm i css-loader style-loader -D //下載兩個loader，都是開發時依賴

進入03-打包樣式資源目錄，執行webpack進行打包：

打開打包生成的built.js，可以看到index.css被成功打包了：

在build目錄下新建index.html引入生成的打包文件built.js：

<script src="./built.js"></script>

隨后使用瀏覽器打開該文件，發現樣式發生了變化，源碼多了style標簽

這便是style-loader的作用。

注意：不同類型的文件要配置不同的loader來處理；比如為了處理less文件，需要webpack.config.js中的rules數組中再增添一個對象：

  module: {
    rules:[ 
      //匹配並處理css文件
      {
        test: /\.css$/,
        //處理這些文件
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      //匹配並處理less文件
      {
       test: /\.less$/,
       use: [
         //以style標簽的形式在head標簽中插入樣式
         'style-loader',
         //將css文件裝換為js形式
         'css-loader',
         //將less文件編譯成css文件
         'less-loader'
       ] 
      }
    ]
  }

可以看到處理less文件需要三個loader，注意loader執行的順序為由下往上，由右往左：

• less-loader：將less文件編譯成css文件；
• css-loader：將css文件內容整合到js中；
• style-loader：從js中找到這些css代碼，將它傳入style標簽，插入head標簽中；

所以處理less文件需要使用三個loader，注意：使用loader之前要先進行下載：

npm i less less-loader -D //全局安裝less和less-loader

注意：最好統一在根目錄下載包，這樣其他子目錄向上查找時都能找到相應的包，避免重復下載；

安裝完依賴包，並且正確配置package.config.js之后，執行webpack指令，就可以成功打包less文件了：

七.打包html資源

1.添加基本配置

首先給webpack.config.js添加基本的配置：

const {resolve} = require('path')

module.exports = {
  entry : './src/index.js',
  output : {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      //laoder的配置
    ]
  },
  plugins: [
    //plugins的配置
  ],
  //為了方便調試，使用不壓縮代碼的development模式
  mode: 'development'
}

打包html文件需要使用插件：

• 使用loader：下載 、使用（配置laoder）；
• 使用plugins： 下載 、引入 、使用；

2.下載和引入插件

首先下載插件，同樣采用全局下載，和開發時依賴：

npm i html-webpack-plugin -D

然后引入插件：

const HtmlWebpackPlugin = require('html-webpack-plugin')

由於它是構造函數，直接new一個實例就可以使用了：

  plugins: [
    //plugins的配置
    new HtmlWebpackPlugin()
  ],

3.打包文件

我們執行webpack打包看看有什么效果：

注意要進入項目目錄04-打包html資源再進行打包；

build目錄下多了一個html文件：

打開該html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
  <script src="built.js"></script></body>
</html>

發現自動引入了built.js文件，注意，src目錄下的源文件index.html中是沒有引入過built.js文件的。

所以，插件html-webpack-plugin的作用是，創建一個空的HTML文件，自動引入打包輸出的所有資源（包括js/css）；

如果想要打包出有結構的html文件，則需要給該插件傳入一個對象，里面有模板參數template：

  plugins: [
    //plugins的配置
    new HtmlWebpackPlugin({
      //復制一個/src/index.html文件，並自動引入打包輸出的所有資源
      template: './src/index.html'
    })
  ],

此時再次執行webpack打包，打包出來的html文件就擁有了src目錄下index.html文件的所有結構，也就是原樣復制了一份。

4.完整配置

webpack.config.js的完整配置：

const {resolve} = require('path')
//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry : './src/index.js',
  output : {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      //laoder的配置
    ]
  },
  plugins: [
    //plugins的配置
    new HtmlWebpackPlugin({
      //復制一個/src/index.html文件，並自動引入打包輸出的所有資源
      template: './src/index.html'
    })
  ],
  //為了方便調試，使用不壓縮代碼的development模式
  mode: 'development'
}

5.總結

我們在入口文件index.js中並沒有引入html文件。這個插件會根據template屬性指定的路徑去尋找該文件，並且把該文件的內容復制進來並輸出。只不過在輸出之前會將打包生成的所有資源都引入到這個復制的html文件中。如果是js文件，就通過script標簽引入；如果是css文件就通過link標簽引入；

需要注意的是，千萬不要手動引入這些html文件，因為插件幫我們自動引入了這些文件，我們再引入就重復了。

注意，與loader的使用不同，使用插件時要多一步引入操作；

八.打包圖片資源

項目目錄如下：

在入口文件index.js中引入樣式文件index.less；index.html文件不用引入，該文件會由插件自動引入；在樣式文件index.less中又引入圖片資源small.png和big.png；通過配置webpack.config.js來打包這些文件：

1.初始配置

const { resolve }  = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path:resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }
    )
  ],
  mode: 'development'
}

此時沒有添加處理圖片的loader，執行webpack時會出現錯誤：

注意：webpack不能識別資源的時候，第一時間就要想到loader。添加以下loader處理圖片資源：

rules: [
    //匹配並處理圖片
    {
        test: /\.(jpg|png|gif)$/,
        //只使用一個loader可以不用use數組
        loader: 'url-loader', 
        options: {
            limit: 8 * 1024
        }
    }
]

只使用一個loader時可以不使用use數組；使用多個loader時需要使用use數組。還可以通過option對象進行參數的配置；

關於options對象中的limit屬性：

• 規定圖片大小小於8kb，就會被base64處理。這樣的好處是：減少服務器的請求數量，減輕服務器壓力；缺點是：圖片體積會增大，導致文件請求速度更慢；
• 所以就需要找到一個平衡點，我們規定8~12KB以下的圖片進行base64處理。所以上面limit中配置的8就表示小於等於8KB的圖片都進行base64處理。開發中可根據實際需要適當調整這個閾值；

2.打包圖片資源

注意，需要下載兩個loader：url-loader和file-loader，因為前者依賴於后者；

回到根目錄下，下載這兩個包，依舊是開發時依賴：

npm i url-loader file-loader -D

安裝完成后執行webpack進行打包：

可以看到，成功地對兩張圖片進行了打包。

查看打包文件輸出的目錄build，發現少了一張圖片：

打開built.js，可以發現，小於8KB的small.png被裝換為了base64編碼，所以會少了一張圖片：

我們再打開打包出來的index.html文件，可以看到，small.png也正常顯示了；

打開調試工具，選中small/png，可以看到該圖片被轉換成了base64編碼：

3.打包html文件中的圖片

上面是通過樣式文件index.less引入的圖片，那么通過src目錄下的index.html文件引入圖片能被正常打包嗎：

  <img src="./big.png" alt="">

執行webpack再次打包，發現並沒有報錯：

但是，查看輸出文件夾下的index.html文件，發現圖片的引入路徑並沒有發生變化：

這顯然是不對的，打包過后，輸出文件夾build中顯然不會存在big.png。因此得出結論：url-loader不能處理html中的圖片。

我們可以添加一個html-loader來處理：

rules: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
]

不能對該loader顧名思義，它是專門處理html中的img圖片的，負責引入img從而能被url-loader進行處理；

再次提醒：凡是使用到loader都是要先下載；

npm i html-loader -D

隨后打包出來的index.html中的圖片路徑就是正確的了：

較低版本的webpack可能會出現解析問題：打包出來的圖片路徑為[object module]。這是由於url-loader采用的是es6模塊化解析，而html-loader引入圖片時采用的是commonjs而發生了沖突；

解決方法為：通過設置esModule: false，來關閉url-loader的es6模塊化，使用commonjs解析：

rules: [
    {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader', 
        options: {
            limit: 8 * 1024,
            esModule: false
        }
    }
]

注意到，打包過后的圖片是一串哈希值，比較長，可以通過name屬性重命名打包后的圖片：

rules: [
    {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader', 
        options: {
            limit: 8 * 1024,
            name: '[hash:10].[ext]'
        }
    }
]

• [hash:10]表示：取圖片哈希值的前十位；

• [ext]表示：取文件的原擴展名；

再次打包，可以看見另外生成了哈希值只有十位的圖片：

還有一個細節：在樣式index.less中我們引入了三張圖片，兩張是相同的；webpack不會打包出三張圖片，它會進行識別，不打包重復的文件，這也是webpack的優點之一；

4.完整配置

至此webpack的完整配置為：

const { resolve }  = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path:resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        //要使用多個loader時使用use數組
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      //匹配並處理圖片
      {
        test: /\.(jpg|png|gif)$/,
        //需要下載url-loader 和 file-loader
        loader: 'url-loader', 
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        //該loader專門處理html中的img圖片
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }
    )
  ],
  mode: 'development'
}

九.打包其他資源

1.安裝file-loader

所謂其他資源，指的是自定義的資源，可能是字體文件，腳本文件等。我們希望這些文件不需要進行壓縮或其他處理，直接原封不動地打包到輸出文件夾中。

比如打包iconfont文件，需要采用專門的laoder進行處理：

module: {
    rules: [
        {
	      exclude: /\.(css|js|html)$/,
          loader: 'file-loader',
        }
    ]
}

打包其他資源(除了html/css/js以外的資源),可以使用exclude屬性排除其他資源。使用file-loader進行打包。

使用前需要在根目錄安裝這個loader：

npm i file-loader -D

2.打包

隨后對src文件下的iconfont文件和其他文件進行打包：

打包出來的文件目錄為：

運行其中的index.html可以正常看到iconfont，說明打包成功：

同樣也可以添加option屬性，重命名打包過后的文件名：

重新打包成功生成重命名后的文件：

3.完整配置

此時webpack的完整配置為：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      //打包其他資源(除了html/css/js以外的資源),可以使用exclude屬性排除其他資源
      {
        exclude: /\.(css|js|html)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }) 
  ],
  mode: 'development'
}

十.devServer

當我們每次給src目錄下新增文件和內容時，都需要重新打包。這顯然很麻煩，webpack也考慮到這一點，因此提供了devServer的功能。

1.安裝devServer

開發服務器 devServer：用於自動化（自動編譯，自動打開瀏覽器，自動刷新瀏覽器）；
特點：只會在內存中編譯打包，不會有任何輸出；
啟動devServer指令為：webpack-dev-server；

首先，需要在根目錄下載該包，同樣采用開發時依賴：

npm i webpack-dev-server -D

2.配置devServer

在webpack.config.js中配置devServer，它與五個基本配置是同一等級的：

  devServer: {
    //代表運行時的目錄(打包后目錄)，也是使用字符串拼接絕對目錄
    contentBase: resolve(__dirname, 'build'),
    //該參數表示啟動gzip壓縮
    compress: true,
    //端口號
	port: 8081,
    //自動打開瀏覽器
    open: true
  }

3.開啟devServer

開啟時添加npx，找到該指令：

 npx  webpack-dev-server

成功運行后，可通過http://localhost:8081端口查看運行結果：

能夠成功顯示：

此時只要改變src目錄下的文件，都會進行自動編譯。這樣不用頻繁輸入webpack重新打包就可以實時看到變化了。

一旦開啟devServer它就會一直運行，可以通過ctrl+ c關閉它：

也可以通過改變參數port和open來設置端口和是否自動打開瀏覽器，注意：只要重新配置了webpack.config.js就需要重啟devServer：

npx webpack-dev-server

我們將打包輸出目錄build下的文件都刪除，再次運行上述指令。打包過后，build目錄下並不會生成任何文件。這就驗證了：devServer只會在內存中編譯打包，不會有任何輸出的特點。

十一.開發環境的基本配置

通過前面知識的學習，我們學會了打包樣式資源，html資源，圖片資源和其他資源。以及學會了通過devServer開啟熱更新。現在我們便可以開始配置基本的開發環境了；

1.開發環境基本配置

webpack.config.js的配置如下：

/**
 * 開發環境配置
 */

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports ={
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      //loader的配置
      //處理less資源
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //處理css資源
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      //處理圖片資源
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // esModule: false
        }
      },
      //處理html中圖片的引入
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      //處理其他資源
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    //plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

2.優化輸出目錄

首先我們整理一下src目錄下的文件，並修改webpack.config.js中的路徑，隨后使用webpack打包。打包出來的build目錄下的文件還是很亂：

如果想要打包出來的build目錄下的文件能與src目錄結構相同呢？

可以給webpack.config.js中的output中的filename添加前綴，這樣打包過后的文件會自動創建這個指定的目錄：

在處理圖片時，只需要添加outputPath屬性就能指定打包后的目錄結構了：

重新打包，圖片文件被打包進了imgs目錄：

同理，可以在處理其他資源的loader的option屬性中添加outputPath屬性指定打包后的目錄結構：

注意了，主要的打包輸出目錄是由五大配置之一的output中的path屬性決定的，上面的這一屬性為build。所以，之后使用outputPath指定的路徑都要拼接在build后面。最后形成完整的路徑。

十二.單獨打包CSS文件

從現在開始我們將部署生成壞境；

常見錯誤：

 ERROR in Entry module not found: Error: Can't resolve 'D:\webpack5\09-提取css成單獨文件\src\index.html' in 'D:\webpack5\09-提取css成單獨文件'

上面的這種錯誤大部分都是由於相關文件路徑錯誤導致的。

1.安裝mini-css-extract-plugin

可通過以下指令安裝mini-css-extract-plugin插件，提取打包文件built.js中的css文件：

npm i mini-css-extract-plugin -D

• 第一步：為了使用該插件：首先引入該插件：

const miniCssExtractPlugin = require('mini-css-extract-plugin')

• 第二步：然后在plugins屬性中通過創建實例的方式使用：

plugins: [
    new miniCssExtractPlugin()
  ],

• 第三步：配合相關的loader：

rules: [
      {
        test: /\.css$/,
        use: [
          // 'style-loader':創建style標簽，將樣式放入
          //使用以下loader取代style-loader，作用：提取js中的css成單獨文件
          miniCssExtractPlugin.loader,
          //將css文件整合到js文件中
          'css-loader',
        ]
      }
    ]

2.單獨打包css文件

完成配置后，再次執行webpack打包文件，沒有報錯，查看生成的打包輸出文件目錄build，發現其中多了一個main.css文件：

這個文件就是提取出來的css文件；

也可以在第二步中傳入參數進行一些配置：比如對輸出路徑和文件進行命名：

plugins: [
    new miniCssExtractPlugin({
      //對輸出的css文件進行重命名
      filename: 'css/built.css'
    })
  ],

隨后，刪除原有打包出來的build目錄，再次執行webpack，重新生成打包目錄build：

可以看到，成功地設置了css文件存放的目錄和文件名。

3.優點

這種做法的好處是：

• 提取后的css文件是通過link標簽引入的，這樣就避免了閃屏現象：

  

• 並且css文件與js文件分離開了，所以js文件體積縮小了，解析速度也會更好一些。

十三.CSS兼容性處理

css3新增了許多的樣式屬性，但是並不是每一個瀏覽器都完全支持了這些樣式屬性，因此我們需要對某些樣式屬性進行兼容性處理，通過webpack可以很容易地實現這一點；

需要使用postcss-loader和postcss-preset-env插件；

這個插件能幫助postcss識別某些環境，而加載指定的配置，從而使兼容性做到精確到某一個瀏覽器版本；

1.安裝依賴

首先，全局下載這個兩包，依舊是開發時依賴：

 npm i postcss-loader postcss-preset-env -D

2.基本配置

配置有兩種寫法：

• 第一種：使用loader默認配置。直接寫：

  'postcss-loader'
  

  這種方法不能修改配置，如果想要修改配置，采用第二種寫法；

• 第二種：修改配置。寫成對象的形式，在options屬性中修改配置：

  {
      loader: 'postcss-loader',
          options: {
              //固定寫法
              ident: 'postcss',
                  plugins: () => [
                      //postcss的插件
                      require('postcss-preset-env')()
                  ]
          }
  }
  

該插件的作用為：幫助postcss找到package.json中browserslist里面的配置，通過配置加載指定的css兼容性樣式。

此時需要在根目錄的package.json中添加相關配置：

在其中添加下列配置：

  "browserslist": {
      //這是開發環境
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
      //生產環境，
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

browserslist對象中可以寫兩個參數：

• development代表開發環境的配置，值為數組；
• production代表生產環境的配置；

關於browserslist的配置github上又很詳盡的介紹。

"last 1 chrome version"代表兼容chrome最近的一個版本；其他瀏覽器也是這個格式。如果是開發模式，我們不需要配置太多瀏覽器，只需要配置調試用到的瀏覽器就夠了；

但是，生產環境就要多寫一點；他們表示：

//表示兼容大於99.8%的瀏覽器
">0.2%",
//不要已經死的瀏覽器，比如IE10
"not dead",
//還有所有的op_mini瀏覽器
"not op_mini all"

這樣就做到了絕大多數瀏覽器的兼容了。

打包時，默認看生產環境，與webpack.config.js中的mode是沒關系的；如果想要使用開發環境，需要設置node環境變量：

process.env.NODE_ENV = 'development'

打包前，webpack的配置是這樣的：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')

//設置nodejs環境變量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          miniCssExtractPlugin.loader,
          'css-loader',
          /**
           * css兼容性處理：postcss --> postcss-loader postcss-preset-env
           */
          {
            loader: 'postcss-loader',
            options: {
              //固定寫法
              ident: 'postcss',
              plugins: () => [
                //postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new miniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
}

打包前，我們在css文件中添加兩個有兼容性問題的新樣式：

使用webpack打包后，打包后的樣式發生了變化：

說明兼容性處理成功了。

這樣，我們就能專心使用各種樣式，而不需要考慮兼容性問題了，webpack會自動幫我們做好這方面的工作。

十四.壓縮CSS

這節介紹使用插件來完成css的壓縮，可以發現有的時候使用loader，有的時候使用插件；主要的區別在於：loader處理的東西比較少於專一，插件處理的東西比較大；

1.下載插件

使用的插件為：optimize-css-assets-webpack-plugin，首先全局下載：

npm i optimize-css-assets-webpack-plugin -D

使用插件的時候，要先在webpack.config.js中引入：

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

2.配置插件

然后在plugins中使用：

  plugins: [
    //壓縮css
    new OptimizeCssAssetsWebpackPlugin()
  ]

只要引用就可以了，不需要額外配置，按照默認的配置已經可以將css文件壓縮了。

然后使用webpack打包，輸出的css文件被壓縮成了一行：

在樣式較多的情況下，壓縮是很有必要的。能夠請求速度更快，加載樣式更快，這樣就能更快地渲染，用戶體驗也就更好。

十五.js語法檢查

1.安裝依賴

語法檢查，不僅可以檢查語法錯誤，還可以設置代碼風格，讓整個團隊的代碼風格都保持一致；專門做語法檢查的如eslint-loader它依賴於eslint庫，所以首先要在全局下載這兩個包：

npm i eslint-loader eslint -D

2.配置eslint

注意：語法檢查只會檢查自己寫的代碼，第三方庫不會也不用檢查；所以需要使用exclude來排除第三方庫：

    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {}
      }
    ]

此外還需要我們在package.json中的eslintConfig中配置檢查規則。關於規則，推薦使用airbnb。在github上的這個項目會詳細告訴你，應該如何配置這些規則：

npm上有兩個將airbnb規則應用到eslint中的包：

• 不包含React相關內容的插件也分為兩種：
  • eslint-config-airbnb-base：包含ES6及以上的內容；開發中一般都會使用ES6語法，所以使用上面這個插件；
  • eslint-config-airbnb-base/legacy：包含ES5和ES5以下；
• eslint-config-airbnb：包含了React的內容；

所以，我們選擇使用eslint-config-airbnb-base，注意，該插件依賴於eslint和eslint-plugin-import兩個包；上面已經下載過eslint了，這里只需要下載其他兩個包：

 npm i eslint-config-airbnb-base eslint-plugin-import -D

package.json中的具體配置為：

  "eslintConfig": {
    //通過extends字段繼承airbnb-base就可以了
    "extends": "airbnb-base"
  }

隨后在入口文件index.js中故意寫一寫不規范的代碼：不加空格，分號等：

然后執行webpack指令，進行打包，發現出現了很多錯誤：

雖然可以根據錯誤提示，在airbnb文檔中查找修改意見。但是手動修改仍然顯得麻煩，可以在webpack.config.js的eslint-loader中的options里添加fix屬性配置，讓它自動修復：

    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {
            //自動修復eslint的錯誤
            fix: true
        }
      }
    ]

再次打包，通過自動修復就不會再顯示錯誤信息了：

可以看到，雖然沒有顯示錯誤，但是有一個警告：不建議使用console；在開發中可以使用console進行調試，但是真正的代碼中不應該含有它；此時可以通過添加下列注釋，讓eslint忽略下一行代碼：

//下一行eslint所有規則都失效(即下一個行不進行eslint檢查)
//eslint-disable-next-line
console.log('123')

一個坑：安裝包的時候，最好按照依賴關系來安裝；即首先安裝下層的包，再安裝上層的包，否則可能會出現意想不到的錯誤；可以通過查看package.json中的配置來觀察相應的包是否成功安裝了；

十六.js兼容性處理

我們將入口文件index.js內容改為箭頭函數：

直接執行webpack打包，打包出來的文件中，該部分並沒有做兼容性處理：

這樣的話，不支持ES6的瀏覽器就會出錯；這時候就需要使用babel-loader來進行js的兼容性處理了；

1.基本配置

webpack.config.js中的配置為：

    rules: [
      /**
       * js兼容性處理：babel-loader @babel/preset-env @babel/core
       */
      {
        test: /\.js/,
        //排除不需要js兼容性處理的文件
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          //預設：指示babel做怎樣的兼容性處理,一般使用@babel/preset-env就可以了
          presets: ['@babel/preset-env']
        }
      }
    ]

注意：凡是涉及到兼容性處理都要使用exclude將不需要進行兼容性處理的文件排除；否則會出錯，如下圖所示，不排除的話，依賴文件node_module中的js都報錯了：

2.使用babel-loader

方法一：使用babel-loader進行基本的兼容性處理；

首先需要在全局下載babel-loader 、@babel/preset-env和@babel/core：

npm i babel-loader @babel/preset-env @babel/core -D  

隨后再次執行webpack打包，這次打包出來的js文件中，ES6的語法全都轉換為了ES5的語法了，也就是做了兼容性處理：

babel-loader存在的問題

只能轉換一些基本語法，如不能轉換promise；比如在入口文件index.js中添加Promise對象：

直接打包是不會被兼容性處理的。

解決方案：通過@babel/polyfill對全部js進行兼容性處理；

3.使用@babel.polyfill

方法二：使用@babel.polyfill，對全部js進行兼容性處理；

首先還是全局安裝@babel/polyfill：

npm i @babel/polyfill -D

它不是laoder或插件，只需要在入口文件index.js中通過import引入就可以使用了：

import '@babel/polyfill';

此時再次執行webpack打包，會發現打包出來的js文件變得非常大：

引入@babel/polyfill前：built.js只有不到4KB：

引入后，變成了441KB：

這是因為只要使用了@babel/polyfill，那么它就會將js文件涉及到的所有兼容性問題都解決掉。

此時入口文件中的Promise就被兼容性處理了：

@babel/polyfill存在的問題

我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了；

解決方法：需要做兼容性處理就做：按需加載（只加載指定的兼容性庫），通過core-js實現；

4.使用core-js

方法三：使用core-js，實現按需加載。

首先全局下載core-js：

 npm i core-js -D

隨后在webpack.config.js中進行相應的配置：

rules: [
      /**
       * js兼容性處理：babel-loader
       */
      {
        test: /\.js/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          //預設：指示babel做怎樣的兼容性處理,一般使用@babel/preset-env就可以了
          presets: [
            [
              '@babel/preset-env',
              {
                //按需加載
                useBuiltIns: 'usage',
                //指定corejs版本
                corejs: {
                  version: 3
                },
                //指定兼容性做到那個版本瀏覽器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]

需要注意的是，使用第三種方法就不能使用第二種方法了，所以要在入口文件index.js中不再引入@babel/polyfill：

隨后再次執行webpack進行打包，會發現，打包出來的js文件相比於使用第二種方法時的441KB，縮減到了104KB：

結合第一種和第三種方法就能實現對所有的js代碼進行兼容性處理；

5.完整配置

最后整個webpack.config.js的配置如下：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      /**
       * js兼容性處理：babel-loader
       */
      {
        test: /\.js/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          //預設：指示babel做怎樣的兼容性處理,一般使用@babel/preset-env就可以了
          presets: [
            [
              '@babel/preset-env',
              {
                //按需加載
                useBuiltIns: 'usage',
                //指定corejs版本
                corejs: {
                  version: 3
                },
                //指定兼容性做到那個版本瀏覽器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

十七.壓縮js和html

1.壓縮js代碼

只需要就webpack.config.js中的模式mode改為生產模式，就會自動壓縮js代碼：

mode: 'production'

內部實現是通過插件UglifyJsPlugin；

執行webpack進行打包，打包出來的js文件被壓縮成了一行：

不需要做html的兼容性處理，因為標簽認識就認識，不認識就不認識，不能轉換；只需要對html進行壓縮處理即可；

2.壓縮html代碼

只需要在配置文件webpack.config.js中給HtmlWebpackPlugin插件添加minify屬性即可：

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      //壓縮html代碼
      minify: {
        //移除空格
        collapseWhitespace: true,
        //移除注釋
        removeComments: true
      }
    })
  ],

執行webpack進行打包，打包出來的html文件被去除了所有空格並移除了注釋：

十八.生產環境基本配置

學習了前面的基本配置，現在可以匯總起來配置基本的生產環境了。

1.配置的復用

如相同的配置可以抽離出來封裝一個復用的loader，比如css和less的兼容性處理，唯一的不同點是多了個less-loader將less轉換為css，所以其余部分可以復用；

未復用前，存在大量的重復代碼：

    rules: [
      //處理css文件
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          //css兼容性處理
          {
            //還需要在webpack.json中定義browserslist
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              //指定插件
              plugins: () => [
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      },
      //處理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          //css兼容性處理
          {
            //還需要在webpack.json中定義browserslist
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              //指定插件
              plugins: () => [
                require('postcss-preset-env')()
              ]
            }
          },
          //由於use數組執行順序為從下往上(注意執行順序)，經過less-loader轉換為css后再進行兼容性處理
          'less-loader'
        ]
      }
    ]

復用后：

//復用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  //css兼容性處理
  {
    //還需要在webpack.json中定義browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      //指定插件
      plugins: () => [
        require('postcss-preset-env')()
      ]
    }
  }
]    
//...
    rules: [
      //處理css文件
      {
        test: /\.css$/,
        //通過擴展運算符使用封裝的loader
        use: [...commonCssLoader]
      },
      //處理less文件
      {
        test: /\.less$/,
        //由於use數組執行順序為從下往上(注意執行順序)，經過less-loader轉換為css后再進行兼容性處理
        use: [...commonCssLoader,'less-loader']
      }
    ]
//...

所以，當遇到重復代碼的時候一定要考慮將重復代碼抽離封裝，達到復用的效果；

2.生產環境基本配置

完整的webpack.config.js配置如下：

//0.引入path模塊解決路徑問題
const { resolve } = require('path');
//1.引入插件提取和兼容性處理css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//2.引入壓縮css插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//3.引入處理html圖片引入的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//復用loader
const commonCssLoader = [
  //這一行作用為將css文件抽離出來
  MiniCssExtractPlugin.loader,
  'css-loader',
  //css兼容性處理
  {
    //還需要在webpack.json中定義browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      //指定插件
      plugins: () => [
        require('postcss-preset-env')()
      ]
    }
  }
]

//package.json中的browserslist默認使用開發環境，若使用生產環境需要定義nodejs環境變量
process.env.NODE_ENV = 'production';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      //1.處理css文件
      {
        test: /\.css$/,
        //通過擴展運算符使用封裝的loader
        use: [...commonCssLoader]
      },
      //2.處理less文件
      {
        test: /\.less$/,
        //由於use數組執行順序為從下往上(注意執行順序)，經過less-loader轉換為css后再進行兼容性處理
        use: [...commonCssLoader,'less-loader']
      },
/**
 * 正常來說：一個文件只能被一個loader處理
 * 當一個文件要被多個loader處理時，那么一定要指定loader的執行順序。
 * 比如先執行eslint-loader，再執行babel-loader。這是因為一旦語法出錯進行兼容性處理就沒意義了。
 * 如何添加順序：enforce: 'pre'
 */

      //3.進行語法檢查
      {
        //在package.json中配置eslintConfig指定檢查規則 --> airbnb
        test: /\.js$/,
        //配出不需要語法檢查的文件
        exclude: /node_modules/,
        //優先執行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          //自動修復錯誤
          fix: true
        }
      },
      //4.js兼容性處理
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          //添加預設，告訴babel以哪種方式進行兼容性處理
          presets: [
            //由於要使用方法一和三，所以使用數組保存
            [
              //簡單處理
              '@babel/preset-env',
              //按需加載
              {
                useBuiltIns: 'usage',
                //指定corejs版本
                corejs: {version: 3},
                //指定瀏覽器版本
                targets: {
                  chrome: '60',
                  firefox: '50'
                }
              }
            ]
          ]
        }
      },
      //5.處理圖片
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {
          //通過base64編碼優化
          limit: 8 * 1024,
          //重命名打包后的圖片
          name: '[hash:10].[ext]',
          //指定輸出路徑
          outputPath: 'imgs'
        }
      },
      //6.處理html中的圖片
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      //8.處理其他文件
      {
        //排除其他文件
        //正則中不加$表示只要匹配到這些詞就行，是不是后綴都可以
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        //原封不動地輸出文件
        loader: 'file-loader',
        options: {
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    //兼容性處理css並單獨抽離css文件
    new MiniCssExtractPlugin({
      //設置輸出路徑
      filename: 'css/built.css',
    }),
    //壓縮css
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      //指定html模板
      template: './src/index.html',
      //7.壓縮html文件
      minify: {
        //移除空格
        collapseWhitespace: true,
        //移除注釋
        removeComments: true
      }
    })
  ],
  //改為production模式自動壓縮js文件
  mode: 'production'
}