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 使用相應模式的配置，
在這里插入圖片描述
一個小的梳理：

webpack能處理js/json資源，不能處理css/img等其他資源
能將 es6 的模塊化語法轉換成瀏覽器能識別的語法
不能將 js 的 es6 基本語法轉化為 es5 以下語法
生產環境比開發環境多一個壓縮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版本為：webpack@5.48.0

在這里插入圖片描述

參考

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/294191.html

標籤：其他

上一篇：maven常見問題

下一篇：SQL基礎學習總結

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