面試重點：webpack

(轉載）原文連接：http://www.javashuo.com/article/p-qxtrdygi-t.html

熟練掌握Webpack的經常使用配置,可以本身構建前端環境,並進行項目優化;

001.談談你對webpack的見解:

webpack是一個模塊打包工具，可使用它管理項目中的模塊依賴，並編譯輸出模塊所需的靜態文件。它能夠很好地管理、打包開發中所用到的HTML,CSS,JavaScript和靜態文件（圖片，字體）等，讓開發更高效。對於不一樣類型的依賴，webpack有對應的模塊加載器，並且會分析模塊間的依賴關係，最後合併生成優化的靜態資源。

002.webpack的基本功能和工做原理？

代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等等

文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等

代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載

模塊合併：在採用模塊化的項目有不少模塊和文件，須要構建功能把模塊分類合併成一個文件

自動刷新：監聽本地源代碼的變化，自動構建，刷新瀏覽器

代碼校驗：在代碼被提交到倉庫前須要檢測代碼是否符合規範，以及單元測試是否經過

自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。

003.webpack構建過程：

從entry裏配置的module開始遞歸解析entry依賴的全部module,
每找到一個module，就會根據配置的loader去找對應的轉換規則。
對module進行轉換後，再解析出當前module依賴的module
這些模塊會以entry爲單位分組，一個entry和其全部依賴的module被分到一個組Chunk。
最後webpack會把全部Chunk轉換成文件輸出
在整個流程中webpack會在恰當的時機執行plugin裏定義的邏輯

004.webpack打包原理:

將全部依賴打包成一個bundle.js，經過代碼分割成單元片斷按需加載。

005.什麼是entry,output?

entry 入口，告訴webpack要使用哪一個模塊做爲構建項目的起點，默認爲./src/index.js

output 出口，告訴webpack在哪裏輸出它打包好的代碼以及如何命名，默認爲./dist

006.什麼是loader，plugins?

loader是用來告訴webpack如何轉換某一類型的文件，而且引入到打包出的文件中。

plugins(插件)做用更大，能夠打包優化，資源管理和注入環境變量

007.什麼是bundle,chunk,module?

bundle是webpack打包出來的文件，chunk是webpack在進行模塊的依賴分析的時候，代碼分割出來的代碼塊。module是開發中的單個模塊

008.npm打包時須要注意哪些？如何利用webpack來更好的構建？

完善基本信息;
定義依賴;
忽略文件;
打標籤;

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

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

url-loader：和 file-loader 相似，可是能在文件很小的狀況下以 base64 的方式把文件內容注入到代碼中去;

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

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

babel-loader：把 ES6 轉換成 ES5;

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

style-loader：把 CSS 代碼注入到 JavaScript 中，經過 DOM 操做去加載 CSS;

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

010.webpack規範:

webpack默認遵循commonjs規範 module.exports
使用webpack進行打包時有兩種模式：
開發模式：主要是用於測試,代碼調試等;
生產模式：要考慮性能問題,要壓縮 若是沒有插件 就不會壓縮;
默認狀況下webpack的配置文件叫webpack.config.js，能夠經過--config指定webpack的配置文件名

011.配置流程：

你能夠嘗試配置腳手架嗎?能夠

012.loader:

css須要兩個loader來處理：css-loader style-loader

postcss-loader 他提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS

代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理。

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

mini-css-extract-plugin

之前都是之間引入內部樣式，把css專門打包成一個css文件，在index.html文件中引入css

optimize-css-assets-webpack-plugin css壓縮
terser-webpack-plugin css壓縮 js不能壓縮了,而後有一個插件,能壓縮js
file-loader 是讓webpack打包圖片
url-loader可讓圖片轉化base64，也可讓webpack打包圖片

webpack 默認狀況下不支持js的高級語法,因此須要使用babel;
babel轉化; npm i @babel/core @babel/preset-env babel-loader --save-dev

013.plugins:

html-webpack-plugin 根據模塊生成一個html文件 此時不會在dist文件夾下面新建index文件了
我須要在public新建 index文件
根據這個模板文件 在內存中生成 index.html 而後自動引入bundle.js
clean-webpack-plugin 去掉沒有用到的模塊

014.loader與plugin的區別？

loader是使webpack擁有加載和解析非js文件的能力
plugin 能夠擴展webpack的功能，使得webpack更加靈活。能夠在構建的過程當中經過webpack的api改變輸出的結果

(轉載）原文連接：http://www.javashuo.com/article/p-qxtrdygi-t.html

---

超值推薦：
阿里雲雙12已開啓，雲產品冰點價，新用戶專享1折起，1核2G雲服務器僅需89元/年，229元/3年。買了對於提高技術或者在服務器上搭建自由站點，都是很不錯的，若是本身有實際操做，面試+工做中確定是加分項。（老用戶能夠用家人或朋友的帳號購買，真心便宜&划算）

可「掃碼」或者「點擊購買 阿里雲"

END