<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      web前端之Webpack面試題及答案

      時間:2021-09-15 14:14:09 類型:web前端
      字號:    

      1、webpack的作用是什么,談談你對它的理解?

      現在的前端網頁功能豐富,特別是SPA(single page web application 單頁應用)技術流行后,JavaScript的復雜度增加和需要一大堆依賴包,還需要解決Scss,Less……新增樣式的擴展寫法的編譯工作。

      所以現代化的前端已經完全依賴于webpack的輔助了。

      現在最流行的三個前端框架,可以說和webpack已經緊密相連,框架官方都推出了和自身框架依賴的webpack構建工具。

      react.js+WebPack

      vue.js+WebPack

      AngluarJS+WebPack

      2、webpack的工作原理?

      WebPack可以看做是模塊打包機:它做的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Sass,TypeScript等),并將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現后,Webpack還肩負起了優化項目的責任。

      3、webpack打包原理

      把一切都視為模塊:不管是 css、JS、Image 還是 html 都可以互相引用,通過定義 entry.js,對所有依賴的文件進行跟蹤,將各個模塊通過 loader 和 plugins 處理,然后打包在一起。

      按需加載:打包過程中 Webpack 通過 Code Splitting 功能將文件分為多個 chunks,還可以將重復的部分單獨提取出來作為 commonChunk,從而實現按需加載。把所有依賴打包成一個 bundle.js 文件,通過代碼分割成單元片段并按需加載

      4、webpack的核心概念

      5、Webpack的基本功能有哪些?

      6、gulp/grunt 與 webpack的區別是什么?

      三者都是前端構建工具,grunt和gulp在早期比較流行,現在webpack相對來說比較主流,不過一些輕量化的任務還是會用gulp來處理,比如單獨打包CSS文件等。
      grunt和gulp是基于任務和流(Task、Stream)的。

      類似jQuery,找到一個(或一類)文件,對其做一系列鏈式操作,更新流上的數據, 整條鏈式操作構成了一個任務,多個任務就構成了整個web的構建流程。
      webpack是基于入口的。

      webpack會自動地遞歸解析入口所需要加載的所有資源文件,然后用不同的Loader來處理不同的文件,用Plugin來擴展webpack功能。

      7、webpack是解決什么問題而生的?

      如果像以前開發時一個html文件可能會引用十幾個js文件,而且順序還不能亂,因為它們存在依賴關系,同時對于ES6+等新的語法,less, sass等CSS預處理都不能很好的解決……,此時就需要一個處理這些問題的工具。

      8、你是如何提高webpack構件速度的?

      多入口情況下,使用CommonsChunkPlugin來提取公共代碼

      通過externals配置來提取常用庫

      利用DllPlugin和DllReferencePlugin預編譯資源模塊通過DllPlugin來對那些我們

      引用但是絕對不會修改的npm包來進行預編譯,再通過DllReferencePlugin將預編譯的模塊加載進來。

      使用Happypack 實現多線程加速編譯

      使用webpack-uglify-paralle來提升uglifyPlugin的壓縮速度。

      原理上webpack-uglify-parallel采用了多核并行壓縮來提升壓縮速度
      使用Tree-shaking和Scope Hoisting來剔除多余代碼

      9、npm打包時需要注意哪些?如何利用webpack來更好的構建?

      Npm是目前最大的 JavaScript 模塊倉庫,里面有來自全世界開發者上傳的可復用模塊。

      你可能只是JS模塊的使用者,但是有些情況你也會去選擇上傳自己開發的模塊。 

      關于NPM模塊上傳的方法可以去官網上進行學習,這里只講解如何利用webpack來構建。

      NPM模塊需要注意以下問題:

      1. 要支持CommonJS模塊化規范,所以要求打包后的最后結果也遵守該規則。

      2. Npm模塊使用者的環境是不確定的,很有可能并不支持ES6,所以打包的最后結果應該是采用ES5編寫的。并且如果ES5是經過轉換的,請最好連同SourceMap一同上傳。

      3. Npm包大小應該是盡量?。ㄓ行﹤}庫會限制包大?。?/span>

      4. 發布的模塊不能將依賴的模塊也一同打包,應該讓用戶選擇性的去自行安裝。這樣可以避免模塊應用者再次打包時出現底層模塊被重復打包的情況。

      5. UI組件類的模塊應該將依賴的其它資源文件,例如.css文件也需要包含在發布的模塊里。

      10、前端為什么要進行打包和構建?

      代碼層面:

      研發流程層面:

      11、webpack的構建流程是什么?從讀取配置到輸出文件這個過程盡量說全。

      Webpack 的運行流程是一個串行的過程,從啟動到結束會依次執行以下流程:

      在以上過程中,Webpack 會在特定的時間點廣播出特定的事件,插件在監聽到感興趣的事件后會執行特定的邏輯,并且插件可以調用 Webpack 提供的 API 改變 Webpack 的運行結果。

      12、怎么配置單頁應用?怎么配置多頁應用?

      單頁應用可以理解為webpack的標準模式,直接在entry中指定單頁應用的入口即可,這里不再贅述

      多頁應用的話,可以使用webpack的 AutoWebPlugin來完成簡單自動化的構建,但是前提是項目的目錄結構必須遵守他預設的規范。多頁應用中要注意的是:

      13、Loader機制的作用是什么?

      webpack默認只能打包js文件,配置里的module.rules數組配置了一組規則,告訴 Webpack 在遇到哪些文件時使用哪些 Loader 去加載和轉換打包成js。

      注意:

      use屬性的值需要是一個由 Loader 名稱組成的數組,Loader 的執行順序是由后到前的;
      每一個 Loader 都可以通過 URL querystring 的方式傳入參數,例如css-loader?minimize中的minimize告訴css-loader要開啟 CSS 壓縮。

      14、常用loader

      css-loader讀取 合并CSS 文件
      style-loader把 CSS 內容注入到 JavaScript 里
      sass-loader 解析sass文件(安裝sass-loader,node-sass)
      postcss-loader自動添加瀏覽器兼容前綴(postcss.config配置)
      url-loader將文件轉換為base64 URI。
      vue-loader處理vue文件。

      15、Plugin(插件)的作用是什么?

      Plugin 是用來擴展 Webpack 功能的,通過在構建流程里注入鉤子實現,它給 Webpack 帶來了很大的靈活性。

      Webpack 是通過plugins屬性來配置需要使用的插件列表的。plugins屬性是一個數組,里面的每一項都是插件的一個實例,在實例化一個組件時可以通過構造函數傳入這個組件支持的配置屬性。

      16、什么是bundle,什么是chunk,什么是module

      bundle:是由webpack打包出來的文件

      chunk:是指webpack在進行模塊依賴分析的時候,代碼分割出來的代碼塊

      module:是開發中的單個模塊

      17、常見Plugins

      HtmlWbpackPlugin自動在打包結束后生成html文件,并引入bundle.js
      cleanwebPackPlugin打包自動刪除上次打包文件

      18、ExtractTextPlugin插件的作用

      ExtractTextPlugin插件的作用是提取出 JavaScript 代碼里的 CSS 到一個單獨的文件。

      對此你可以通過插件的filename屬性,告訴插件輸出的 CSS 文件名稱是通過[name]_[contenthash:8].css字符串模版生成的,里面的[name]代表文件名稱,[contenthash:8]代表根據文件內容算出的8位 hash 值, 還有很多配置選項可以在ExtractTextPlugin的主頁上查到。

      19、sourceMap

      是一個映射關系,將打包后的文件隱射到源代碼,用于定位報錯位置

      配置方式:

      例如:devtool:‘source-map’
      加不同前綴意義:

      最佳實踐:
      開發環境:cheap-module-eval-source-map
      線上環境:cheap-mudole-source-map

      20、HMR熱模塊更新

      借助webpack.HotModuleReplacementPlugin(),devServer開啟hot

      場景1:實現只刷新css,不影響js
      場景2:js中實現熱更新,只更新指定js模塊

      if (module.hot) {  module.hot.accept(’./library.js’, function() {    // Do something with the updated library module…  });}

      21、webpack如何配置多入口文件?

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

      用于描述入口的對象。你可以使用如下屬性:

      22、babel 相關: polyfill 以及 runtime 區別, ES stage 含義,preset–env 作用等等

      1.polyfill 以及 runtime 區別

      babel-polyfill 的原理是當運行環境中并沒有實現的一些方法,babel-polyfill會做兼容。

      babel-runtime 它是將es6編譯成es5去執行。我們使用es6的語法來編寫,最終會通過babel-runtime編譯成es5.也就是說,不管瀏覽器是否支持ES6,只要是ES6的語法,它都會進行轉碼成ES5.所以就有很多冗余的代碼。

      babel-polyfill 它是通過向全局對象和內置對象的prototype上添加方法來實現的。比如運行環境中不支持Array.prototype.find 方法,引入polyfill, 我們就可以使用es6方法來編寫了,但是缺點就是會造成全局空間污染。

      babel-runtime: 它不會污染全局對象和內置對象的原型,比如說我們需要Promise,我們只需要import Promise from 'babel-runtime/core-js/promise'即可,這樣不僅避免污染全局對象,而且可以減少不必要的代碼。

      黄网站免费 <