web前端高階webpack - 初識webpack 的安裝執行及核心概念

初識webpack

• 本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。這是官網給出的解釋
• 通俗的講：webpack就是一個打包工具，通過webpack可以將js、css、sass、scss、jpg、png等等檔案分門別類打包生成一個js/css/jpg等檔案
  

webpack作為前端構建構建的用途

• 程式碼轉換
  • 可以將ts程式碼轉換為js程式碼
  • 將less、scss等程式碼轉換為css程式碼
• 檔案優化：可以將js/css程式碼等進行合併壓縮，減少請求次數
• 程式碼分割：把一個頁面中一些通用的程式碼分割出來
• 模組合併：把幾個js中的程式碼合併為一個單獨的js
• 自動重新整理：程式碼修改後瀏覽器自動重新整理頁面載入資料
• 程式碼校驗
• 自動釋出

webpack及webpack-cli安裝

• 在安裝webpack前，首先要確保已經安裝了node環境。
• webpack的安裝也很簡單 直接npm install webpack即可。webpack-cli同理。

npm install webpack webpack-cli

webpack 執行

• 可以通過npm run [dev] 來執行webpack
• run後面的dev是自己在package.json檔案中自己配置的，可以是任何值

{
"scripts":{
	"dev":"webpack",
	"build": "webpack --mode production"//通過--mode可以指定開發環境還是生產環境
	}
}

webpack 的四個核心概念

• 入口（entry）

-入口起點(entry point)指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。

• 每個依賴項隨即被處理，最後輸出到稱之為 bundles 的檔案中，我們將在下一章節詳細討論這個過程。
  可以通過在 webpack.config.js配置檔案中中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。預設值為 ./src。

//簡單配置
module.exports = {
  entry: './src/main.js'
};

• 出口（output）

• output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為 ./dist。基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的資料夾中。你可以通過在配置中指定一個 output 欄位，來配置這些處理過程
• 在下面的示例中，我們通過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪裡。
• 下面程式碼中匯入的 path 模組是一個 Node.js 核心模組，用於操作檔案路徑。

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  }
};

• loader

• loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案（css/jpg等）轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。
• 本質上，webpack loader 將所有型別的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組。
• 在webpack的配置中loader有兩個目標
  • test屬性，用於標識出應該被對應的loader進行轉換的某個或某些檔案
  • use屬性，表示進行轉換時，應該使用哪個loader

注意，loader 能夠 import 匯入任何型別的模組（例如 .css 檔案），這是 webpack 特有的功能，其他打包程式或任務執行器的可能並不支援。我們認為這種語言擴充套件是有很必要的，因為這可以使開發人員建立出更準確的依賴關係圖。

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [
      { test: /\.scss$/, use: 'scss-loader' }
    ]
  }
};

• 外掛（plugin）

• loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。外掛的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變數。外掛介面功能極其強大，可以用來處理各種各樣的任務。
• 想要使用一個外掛，你只需要 require() 它，然後把它新增到 plugins 陣列中。多數外掛可以通過選項(option)自定義。你也可以在一個配置檔案中因為不同目的而多次使用同一個外掛，這時需要通過使用 new 操作符來建立它的一個例項。

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [
      { test: /\.scss$/, use: 'scss-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})//將打包壓縮好的js檔案自動引入到index.html中
  ]
};