【Webpack 簡介及五個核心概念】

webpack 是什麼

webpack 是一種前端資源建構工具，一個靜态子產品打包器(module bundler)。

在 webpack 看來, 前端的所有資源檔案(js/json/css/img/less/…)都會作為子產品處理。

它将根據子產品的依賴關系進行靜态分析，打包生成對應的靜态資源(bundle)。

webpack 五個核心概念

1. Entry

入口(Entry)訓示 webpack 以哪個檔案為入口起點開始打包，分析建構内部依賴圖。

2. Output

輸出(Output)訓示 webpack 打包後的資源 bundles 輸出到哪裡去，以及如何命名。

3. Loader

webpack 隻能了解 JavaScript 和 JSON 檔案，這是 webpack 開箱可用的自帶能力。loader 讓webpack 能夠去處理其他類型的檔案，并将它們轉換為有效 子產品，以供應用程式使用，以及被添加到依賴圖中。

4. Plugins

插件(Plugins)可以用于執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量等。

5. Mode

模式(Mode)訓示 webpack 使用相應模式的配置。

一個小的梳理：

1. webpack能處理js/json資源，不能處理css/img等其他資源
2. 能将 es6 的子產品化文法轉換成浏覽器能識别的文法
3. 不能将 js 的 es6 基本文法轉化為 es5 以下文法
4. 生産環境比開發環境多一個壓縮js代碼

基本的webpack配置結構

webpack.config.js

是webpack的配置檔案，下面是一個打包樣式資源的例子：

注意：webpack的五個核心概念除了loader，其他四個都能在下面

webpack.config.js

導出對象的屬性中展現，而loader配置的屬性是：

module

。

/*
  webpack.config.js  webpack的配置檔案
    作用: 訓示 webpack 幹哪些活（當你運作 webpack 指令時，會加載裡面的配置）

    所有建構工具都是基于nodejs平台運作的~子產品化預設采用commonjs。
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起點
  entry: './src/index.js',
  // 輸出
  output: {
    // 輸出檔案名
    filename: 'built.js',
    // 輸出路徑
    // __dirname nodejs的變量，代表目前檔案的目錄絕對路徑
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 詳細loader配置
      // 不同檔案必須配置不同loader處理
      {
        // 比對哪些檔案
        test: /\.css$/,
        // 使用哪些loader進行處理
        use: [
          // use數組中loader執行順序：從右到左，從下到上 依次執行
          // 建立style标簽，将js中的樣式資源插入進行，添加到head中生效
          'style-loader',
          // 将css檔案變成commonjs子產品加載js中，裡面内容是樣式字元串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less檔案編譯成css檔案
          // 需要下載下傳 less-loader和less
          'less-loader'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 詳細plugins的配置
  ],
  // 模式
  mode: 'development', // 開發模式
  // mode: 'production'
}

           

環境參數

看一下自己的環境

檢視node版本

node -v
           

node版本為：v14.15.4

檢視webpack版本

npm info webpack
           

webpack版本為：[email protected]

參考

• https://www.bilibili.com/video/BV1e7411j7T5?p=3