(轉載）原文鏈接：https://juejin.im/post/5de36f2de51d4542e64ae38f
熟練掌握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改變輸出的結果
(轉載）原文鏈接：https://juejin.im/post/5de36f2de51d4542e64ae38f
超值推薦：
阿里雲雙12已開啓，雲產品冰點價，新用戶專享1折起，1核2G雲服務器僅需89元/年，229元/3年。買了對於提升技術或者在服務器上搭建自由站點，都是很不錯的，如果自己有實際操作，面試+工作中肯定是加分項。（老用戶可以用家人或朋友的賬號購買，真心便宜&划算）
可“掃碼”或者“點擊購買 阿里雲"