前端面試-webpack篇

考點：

僅針對初中級，大概梳理下面幾個

• 什麼是webpack
• 核心概念
• 與gulp、grunt的區別
• 打包過程
• 怎麼實現按需加載
• 你平時項目中寫過webpack嗎

什麼是webpack

webpack是一個靜態模塊處理器，當它處理應用程序時，它會遞歸地構建一個關係依賴圖，其中包含應用程序須要的每一個模塊，而後把全部這些模塊打包成一個或多個包。

核心概念

• entry（入口）

告訴webpack要使用哪些模塊，做爲內部依賴圖的開始

• output（出口）

告訴webpack在哪裏輸出它所構建的bundles，以及如何命名這些文件

• loader

處理非JS文件，把文件轉換成webpack能處理的模塊

loader 有兩個屬性：

- test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
- use 屬性，表示進行轉換時，應該使用哪一個 loader。
複製代碼

• plugin 從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  //引入plugin

module.exports = {
  // JavaScript 執行入口文件
  entry: './main.js',
  output: {
    // 把全部依賴的模塊合併輸出到一個 bundle.js 文件
    filename: 'bundle.js',
    // 輸出文件都放到 dist 目錄下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        // 用正則去匹配要用該 loader 轉換的 CSS 文件
        test: /\.css$/,
        use: [
            {loader: MiniCssExtractPlugin.loader},
            'css-loader',
        ],
      }
    ]
  },
  plugins: [
      new MiniCssExtractPlugin({
          filename: `[name]_[contenthash:8].css`,
          chunkFilename: '[id].css',
      })
  ]
};
複製代碼

• Module：

模塊，在 Webpack 裏一切皆模塊，一個模塊對應着一個文件。Webpack 會從配置的 Entry 開始遞歸找出全部依賴的模塊。

• Chunk

代碼塊，一個 Chunk 由多個模塊組合而成，用於代碼合併與分割。

與gulp、grunt的區別

Grunt

有大量現成的插件封裝了常見的任務，也能管理任務之間的依賴關係，自動化執行依賴的任務

Gulp

是一個基於流的自動化構建工具。 除了能夠管理和執行任務，還支持監聽文件、讀寫文件。Gulp 被設計得很是簡單，只經過下面5個方法就能夠勝任幾乎全部構建場景：

• 經過 gulp.task 註冊一個任務；
• 經過 gulp.run 執行任務；
• 經過 gulp.watch 監聽文件變化；
• 經過 gulp.src 讀取文件；
• 經過 gulp.dest 寫文件。

Gulp 的最大特色是引入了流的概念，同時提供了一系列經常使用的插件去處理流，流能夠在插件之間傳遞。Gulp 的優勢是好用又不失靈活，既能夠單獨完成構建也能夠和其它工具搭配使用。

grunt和gulp是基於任務和流（Task、Stream）的。相似jQuery，找到一個（或一類）文件，對其作一系列鏈式操做，更新流上的數據， 整條鏈式操做構成了一個任務，多個任務就構成了整個web的構建流程。其缺點是集成度不高，要寫不少配置後才能夠用，沒法作到開箱即用。

webpack是基於入口的。webpack會自動地遞歸解析入口所須要加載的全部資源文件，而後用不一樣的Loader來處理不一樣的文件，用Plugin來擴展webpack功能。

因此總結一下：

從構建思路來講 gulp和grunt須要開發者將整個前端構建過程拆分紅多個Task，併合理控制全部Task的調用關係 webpack須要開發者找到入口，並須要清楚對於不一樣的資源應該使用什麼Loader作何種解析和加工

webpack有哪些常見 loader 和 plugin，你用過哪些

• file-loader：把文件輸出到一個文件夾中，在代碼中經過相對 URL 去引用輸出的文件

• source-map-loader：加載額外的 Source Map 文件，以方便斷點調試

• image-loader：加載而且壓縮圖片文件

• babel-loader：把 ES6 轉換成 ES5

• css-loader：加載 CSS，支持模塊化、壓縮、文件導入等特性

• eslint-loader：經過 ESLint 檢查 JavaScript 代碼

• define-plugin：定義環境變量

• commons-chunk-plugin：提取公共代碼

• uglifyjs-webpack-plugin：經過UglifyES壓縮ES6代碼

打包過程

一、初始化：啓動構建，讀取和合並參數，加載plugin，實例化complier

二、編譯：從 Entry 發出，針對每一個 Module 串行調用對應的 Loader 去翻譯文件內容，再找到該 Module 依賴的 Module，遞歸地進行編譯處理。

三、輸出：對編譯後的 Module 組合成 Chunk，把 Chunk 轉換成文件，輸出到文件系統。

segmentfault.com/a/119000001…