前端面試題 -- webpack

時間 2019-11-08

標籤端面試題 webpack 简体版

原文原文鏈接

前言

隨着前端的不斷髮展，現代前端開發的複雜度和規模愈來愈龐大。工程化的思想催生了不少流行框架的進程，做爲如今最流行的前端構建工具--webpack，不少面試、工做場景中都會出現了它的身影。因此對於如今的前端來講，瞭解並可以使用webpack，不管對我的技能或者職場求職來講，都是一種有力的提高css

感興趣的小夥伴能夠點擊這裏，查看完整版前端面試題html

若是文章中有出現紕漏、錯誤之處，還請看到的小夥伴留言指正，先行謝過前端

如下 ↓node

1. 對webpack的瞭解

官方文檔webpack

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)，將項目看成一個總體，經過一個給定的的主文件，webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包成一個或多個瀏覽器可識別的js文件

核心概念：git

入口(entry)

入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始github

能夠經過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）web

module.exports = {
  entry: './path/to/my/entry/file.js'
};

輸出(output)

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles ，以及如何命名這些文件，默認值爲 ./dist面試

loader

loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）

插件(plugins)

loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量

模式

經過選擇 development 或 production 之中的一個，來設置 mode 參數，你能夠啓用相應模式下的 webpack 內置的優化

module.exports = {
  mode: 'production'
};

2. webpack，裏面的webpack.config.js怎麼配置

let webpack = require('webpack');

module.exports = {
    entry:'./entry.js',  //入口文件
    
    output:{
        //node.js中__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑
        path:__dirname, //輸出位置
        filename:'build.js' //輸入文件
    },
    
    module:{  
        // 關於模塊的加載相關，咱們就定義在module.loaders中
        // 這裏經過正則表達式去匹配不一樣後綴的文件名，而後給它們定義不一樣的加載器。
        // 好比說給less文件定義串聯的三個加載器（！用來定義級聯關係）：
        rules:[
          {
            test:/\.css$/,      //支持正則
            loader:'style-loader!css-loader'
          }
        ]
    },
    
    //配置服務
    devServer:{
        hot:true, //啓用熱模塊替換
        inline:true 
        //此模式支持熱模塊替換：熱模塊替換的好處是隻替換更新的部分,而不是頁面重載.
    },
    
    //其餘解決方案配置
    resolve:{ 
        extensions:['','.js','.json','.css','.scss']  
    },
    
    //插件
    plugins:[
        new webpack.BannerPlugin('This file is create by baibai')
    ]

}

3. webpack本地開發怎麼解決跨域的

下載 webpack-dev-server 插件
配置 webpack.config.js 文件

// webpack.config.js

var WebpackDevServer = require("webpack-dev-server");

module.exports = {
    ...
    
    devServer: {
        ...
        port: '8088', //設置端口號
        // 代理設置
        proxy: {
            '/api': {
                target: 'http://localhost:80/index.php', // 目標代理
                pathRewrite: {'^/api' : ''}, // 重寫路徑
                secure: false, // 是否接受運行在 HTTPS 上
                
            }
        }
    }
}

4. 如何配置多入口文件

配置多個入口文件

entry: {
  home: resolve(__dirname, "src/home/index.js"),
  about: resolve(__dirname, "src/about/index.js")
}

5. webpack與grunt、gulp的不一樣

三者都是前端構建工具
grunt 和 gulp 是基於任務和流的。找到一個（或一類）文件，對其作一系列鏈式操做，更新流上的數據，整條鏈式操做構成了一個任務，多個任務就構成了整個web的構建流程

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

webpack 與前者最大的不一樣就是支持代碼分割，模塊化（AMD,CommonJ,ES2015），全局分析

爲何選擇webpack

6. 有哪些常見的Loader？他們是解決什麼問題的

css-loader：加載 CSS，支持模塊化、壓縮、文件導入等特性
style-loader：把 CSS 代碼注入到 JavaScript 中，經過 DOM 操做去加載 CSS
slint-loader：經過 SLint 檢查 JavaScript 代碼
babel-loader：把 ES6 轉換成 ES5
file-loader：把文件輸出到一個文件夾中，在代碼中經過相對 URL 去引用輸出的文件
url-loader：和 file-loader 相似，可是能在文件很小的狀況下以 base64 的方式把文件內容注入到代碼中去

7. 有哪些常見的Plugin？他們是解決什麼問題的

define-plugin：定義環境變量
commons-chunk-plugin：提取公共代碼

8. Loader和Plugin的不一樣

loader 加載器

Webpack 將一切文件視爲模塊，可是 webpack 原生是隻能解析 js 文件. Loader 的做用是讓 webpack 擁有了加載和解析非 JavaScript 文件的能力
在 module.rules 中配置，也就是說他做爲模塊的解析規則而存在，類型爲數組

Plugin 插件

擴展 webpack 的功能，讓 webpack 具備更多的靈活性
在 plugins 中單獨配置。類型爲數組，每一項是一個 plugin 的實例，參數都經過構造函數傳入

9. webpack的構建流程是什麼

初始化參數：從配置文件和 Shell 語句中讀取與合併參數，得出最終的參數
開始編譯：用上一步獲得的參數初始化 Compiler 對象，加載全部配置的插件，執行對象的 run 方法開始執行編譯
肯定入口：根據配置中的 entry 找出全部的入口文件
編譯模塊：從入口文件出發，調用全部配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理
完成模塊編譯：在通過第4步使用 Loader 翻譯完全部模塊後，獲得了每一個模塊被翻譯後的最終內容以及它們之間的依賴關係
輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的 Chunk，再把每一個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是能夠修改輸出內容的最後機會
輸出完成：在肯定好輸出內容後，根據配置肯定輸出的路徑和文件名，把文件內容寫入到文件系統

在以上過程當中， Webpack 會在特定的時間點廣播出特定的事件，插件在監聽到感興趣的事件後會執行特定的邏輯，而且插件能夠調用 Webpack 提供的 API 改變 Webpack 的運行結果

10. 是否寫過Loader和Plugin？描述一下編寫loader或plugin的思路

編寫 Loader 時要遵循單一原則，每一個 Loader 只作一種"轉義"工做。每一個 Loader 的拿到的是源文件內容 （source），能夠經過返回值的方式將處理後的內容輸出，也能夠調用 this.callback() 方法，將內容返回給 webpack 。還能夠經過 this.async() 生成一個 callback 函數，再用這個 callback` 將處理後的內容輸出出去
相對於 Loader 而言，Plugin 的編寫就靈活了許多。 webpack 在運行的生命週期中會廣播出許多事件，Plugin 能夠監聽這些事件，在合適的時機經過 Webpack 提供的 API 改變輸出結果