webpack面試1

平平丶淡淡發表於2024-03-14
Web面試

一、談談對webpack的認識

  1. webpack是一個模組打包工具，它能夠很好地管理與打包Web開發中所用到的HTML、JS、CSS以及各種靜態檔案（圖片、字型等），讓開發過程更加高效。對於不同型別的資源，webpack有對應的模組載入器（loader）來處理。webpack會分析模組間的依賴關係，最後輸出最佳化且合併後的靜態資源。
  2. 在開發階段，webpack提供了一個基於Node.js Express框架的開發伺服器。開發伺服器會監聽每一個檔案的變化，進行實時打包，並且可以推送通知前端頁面程式碼發生了變化，從而實現頁面的自動重新整理。
  3. webpack具有5大核心：entry（入口）、output（輸出）、loader（載入器）、plugins（外掛）、mode（模式）。
    • entry：指示webpack以哪些檔案作為入口，進行打包
    • output：指示webpack將打包後的資源輸出到哪個位置
    • loader：webpack本身只能處理js、json等資源，藉助loader能完成對其他資源的解析處理
    • plugins：擴充套件webpack功能，加入自定義的構建行為
    • mode：指示webpack以哪種模式進行打包，有開發模式（development）和生產模式（production）

二、常用的loader

loader主要用於對模組的原始碼進行轉換，實現對不同格式檔案的處理，常用的loader如下：

  • 處理樣式資源

    1. less-loader、sass-loader、stylus-loader：將各種對應的樣式檔案使用對應的loader轉化為css檔案

    2. css-loader：負責將css檔案編譯成webpack能識別的模組

    3. style-loader：動態建立style標籤，將css模組的內容插入

    4. postcss-loader：css相容性處理

      • 下載依賴

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

      • 配置

        module.exports = {
    ......
    module: {
        rules: [
            {
                // 用來匹配 .css 結尾的檔案
                test: /\.css$/,
                // use 陣列裡面 Loader 執行順序是從右到左
                use: [
                  "css-loader",
                  {
                    loader: "postcss-loader",
                    options: {
                      postcssOptions: {
                        plugins: [
                          "postcss-preset-env", // 能解決大多數樣式相容性問題
                        ],
                      },
                    },
                  },
                ],
            }
        ]
    }
    ......
}

      • 在 package.json 檔案中新增 browserslist 來控制樣式的相容性做到什麼程度

        {
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

  • 處理圖片資源

    1. file-loader：將檔案輸出到指定的資料夾中，並在程式碼中透過相對URL引用這些檔案

    2. url-loader：在檔案較小時，可以將檔案內容以Base64的格式注入到程式碼中，從而避免額外的HTTP請求

    3. webpack5將上述兩個loader的功能內建到webpack了，只需要配置 type : "asset"即可，對於Base64的處理如下所示：

      {
    test: /\.(png|jpe?g|gif|webp)$/,
    type: "asset",
    parser: {
        dataUrlCondition: {
            maxSize: 10 * 1024 // 小於10kb的圖片會被base64處理
        }
    }
},

  • 處理字型圖示資源和其他資源

    1. type : "asset/resource"：相當於file-loader，將檔案轉化成webpack能識別的模組，其他不做處理
    2. type : "asset"：相當於url-loader，小於某個大小的資源會處理成 data URI 形式

  • 處理js資源

    1. Eslint：檢查程式碼格式規範

      • 編寫配置檔案：專案根目錄新建.eslintrc.*或直接在package.json中配置eslintConfig

      • 具體配置

        module.exports = {
  // 解析選項
  parserOptions: {},
  // 具體檢查規則
  rules: {},
  // 繼承其他規則
  extends: [],
  // ...
  // 其他規則詳見：https://eslint.bootcss.com/docs/user-guide/configuring
};

      • parserOptions解析選項

        parserOptions: {
  ecmaVersion: 6, // ES 語法版本
  sourceType: "module", // ES 模組化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 專案，就需要開啟 jsx 語法
  }
}

      • rules規則

        1. "off"或0：關閉規則
        2. "warn"或1：開啟規則，使用警告級別，不會導致程式退出
        3. "error"或2：開啟規則，使用錯誤級別，會導致程式退出
        rules: {
  semi: "error", // 禁止使用分號
  'array-callback-return': 'warn', // 強制陣列方法的回撥函式中有 return 語句，否則警告
  'default-case': [
    'warn', // 要求 switch 語句中有 default 分支，否則警告
    { commentPattern: '^no default$' } // 允許在最後註釋 no default, 就不會有警告了
  ],
  eqeqeq: [
    'warn', // 強制使用 === 和 !==，否則警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少數情況下不會有警告
  ],
}

      • extends繼承：繼承現有規則

        1. eslint:recommended：Eslint官方規則
        2. plugin:vue/essential：Vue-cli官方規則
        3. react-app：React-cli官方規則
        // 例如在React專案中，我們可以這樣寫配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我們的規則會覆蓋掉react-app的規則
    // 所以想要修改規則直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

      • webpack中使用

        1. 下載依賴

          npm i eslint-webpack-plugin eslint -D

        2. 定義Eslint配置檔案

          module.exports = {
  // 繼承 Eslint 規則
  extends: ["eslint:recommended"],
  env: {
    node: true, // 啟用node中全域性變數
    browser: true, // 啟用瀏覽器中全域性變數
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定義變數
  },
};

        3. 在webpack.config.js中啟用

          const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
    ......
    plugins: [
        new ESLintWebpackPlugin({
          // 指定檢查檔案的根目錄
          context: path.resolve(__dirname, "src"),
        }),
    ]
}

      • VS Code 中 Eslint外掛

        下載 Eslint 外掛，即可不用編譯就能看到錯誤，可以提前解決。但此時就會對專案所有檔案預設進行 Eslint 檢查了，我們 dist 目錄下的打包後檔案就會報錯。可以使用 Eslint 忽略檔案解決。在專案根目錄新建.eslintignore檔案:

        # 忽略dist目錄下所有檔案
dist

    2. Babel：對js做相容性處理

      主要用於將 ES6 語法編寫的程式碼轉換為向後相容的 JavaScript 語法，以便能夠執行在當前和舊版本的瀏覽器或其他環境中

      • 編寫配置檔案：專案根目錄下新建babel.config.*，或直接在package.json中配置babel

      • 具體配置

        module.exports = {
  // 預設
  presets: [],
};

      • presets 預設：就是一組Babel外掛，擴充套件Babel功能

        1. @babel/preset-env: 一個智慧預設，允許您使用最新的 JavaScript。
        2. @babel/preset-react：一個用來編譯 React jsx 語法的預設
        3. @babel/preset-typescript：一個用來編譯 TypeScript 語法的預設

      • webpack中使用

        1. 下載依賴

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

        2. 定義Babel配置檔案

          module.exports = {
  presets: ["@babel/preset-env"],
};

        3. 在webpack.config.js中啟用

          {
    test: /\.js$/,
    exclude: /node_modules/, // 排除node_modules程式碼不編譯
    loader: "babel-loader",
}

相關文章