1：什麼是模組化開發？

模組化是指解決一個複雜問題時，自訂向下逐層把系統劃分為若干模組的過程，有多種屬性，分別反映其內部特性；前端模組化一般指的是最優的程式碼組合，也可能是為了解決某些問題，包括很多特定模組組成的大模組。如果沒有模組化，可能大家編寫程式碼時最常見最多的就是複製。

當我們需要某個功能的程式碼時，可以檢視一下，自己在那個以前的專案中寫過，有些過，我們就會copy過來，copy多了，自然程式碼的可維護性就會下降。

模組化之後的程式碼，我們考慮更多的是：程式碼使用和維護成本的問題。所以有了很多模組化的規範：CommonJS、AMD和ES6 Module規範

CommonJS：是 Nodejs 廣泛使用的一套模組化規範，是一種同步

• · require：引入一個模組
• · exports：匯出模組內容
• · module：模組本身
• 除了 JavaScript 的模組化，在 CSS 樣式中也可以採用@import的方式來引入自己依賴的模組：
• @import 'reset.css';

• AMD：是 JS 模組載入庫RequireJS提出並且完善的一套模組化規範，AMD 是一種非同步載入模組依賴的方式；
• id：模組的 id
• dependencies：模組依賴
• factory：模組的工廠函式，即模組的初始化操作函式
• require：引入模組
• ES6 Module：ES6 推出的一套模組化規範。
• import：引入模組依賴
• export：模組匯出

在一些 Less 或者 Sass 這些 CSS 預處理語言中@import還可以用來匯入一些變數、函式和mixin的定義。

Tips：大家可能也經常聽到元件化這個名詞，模組化一般指的是，可以被抽象封裝的最小/最優程式碼集合，模組化解決的是功能耦合問題；元件化則更像是模組化進一步封裝，根據業務特點或者不同的場景封裝出具有一定功能特性的獨立整體；另外，前端提到元件化更多的是具有模板、樣式和 JS 互動的 UI 元件。

1.1 webpack與Grunt/Gulp這類打包工具有什麼不同？

webpack可以做到按需載入，像Grunt，Gulp這類構建工具，打包的思路是：遍歷原始檔〉匹配規則〉打包，這個過程中做不到按需載入，即對於打包起來的資源，到底頁面用不用，打包過程是不關心的；

Webpack跟其他構造工具本質上不同之處在於：Webpack是從入口檔案開始，經過模組依賴載入/分析和打包三個流程完成專案的構造。在載入/分析和打包的三個過程中，可以針對一些解決方案，達到按需載入的目的，比如code split

1.2 與webpack類似的工具還有那些？談談你為什麼選擇（或放棄）使用webpack?

自由發揮

2：為什麼是webpack?

按需載入

當然，Webpack 還可以輕鬆的解決傳統構建工具解決的問題：

• · 模組化打包，一切皆模組，JS 是模組，CSS 等也是模組；
• · 語法糖轉換：比如 ES6 轉 ES5、TypeScript；
• · 前處理器編譯：比如 Less、Sass 等；
• · 專案優化：比如壓縮、CDN；
• · 解決方案封裝：通過強大的 Loader 和外掛機制，可以完成解決方案的封裝，比如 PWA；
• · 流程對接：比如測試流程、語法檢測等。

3: webpack的配置有哪些，分別可以幫我們解決什麼問題？

因為 Webpack 實際是用 Node.js 寫的，所以首先要進行Node.js 的安裝

NPM 的常用命令

下面介紹下 NPM 的常用命令：安裝、刪除、初始化、配置。

安裝某個 NPM 包，使用命令npm install packageName，簡寫npm i packageName，如果執行命令的目錄下有package.json則可以直接用npm install安裝package.json中的所有依賴。如果我們要安裝某個版本的包，則可以使用命令npm i [email protected]格式。

如果我們安裝依賴包並且將這個依賴寫入package.json則可以使用命令npm i packageName --save（簡寫npm i packageName -S），如果希望寫到package.json開發依賴中（devdependencies）則使用命令npm i packageName --save-dev（簡寫npm i packageName -D）

刪除某個 NPM 包，則使用npm uninstall 包名。

本地模式和全域性模式

npm 的包安裝，分為本地模式和全域性模式，預設是本地模式，即在執行npm install命令的當前目錄建立node_modules，然後下載安裝包及其依賴到node_modules目錄。全域性模式是指安裝到全域性路徑的方式。在 Node.js 的 require 依賴之時，會優先查詢自己當前檔案的node_modules，如果沒有，則迴圈遍歷上層的node_modules，如果便歷到根目錄還找不到，則會使用全域性模式安裝的模組，另外全域性模式安裝的包可以指定全域性命令，只需要在package.json增加bin欄位並且指向包內對應的檔案即可。全域性安裝一個包，使用命令npm install --global，--global可以簡寫為-g。

初始化一個 NPM 專案

npm init 用來初始化生成一個新的 package.json 檔案。輸入npm init並且根據對應的提示回答問題，會向用戶提問一系列問題，如果你覺得不用修改預設配置，一路回車就可以了。
如果使用了-f（代表force）、-y（代表yes），則跳過提問階段，直接生成一個新的package.json檔案。

設定 NPM 映象

npm install -g cnpm --registry=https://registry.npm.taobao.org

NPM 其他常用命令

npm set：設定環境變數，例如：npm set init-author-name 'Your name'，初始化的時候會使用預設環境變數；

npm info：檢視某個包的資訊，例如：npm info lodash；

npm search：查詢 npm 倉庫，後面可以跟字串或者正則表示式，例如：npm search webpack；

npm list：樹形的展現當前專案安裝的所有模組，以及對應的依賴，例如：npm list --global檢視全域性安裝的模組。

1. 什麼是 NPM Scripts？NPM Scripts 可以用來做什麼？

Npm 不僅可以用於模組管理，還可以用於執行指令碼，package.json檔案中可以新增script欄位，用於指定指令碼命令，供npm直接呼叫

例如：

{

"scripts": {

"build": "webpack",

"start": "node src/scripts/dev.js"

}

}

在package.json新增上面欄位之後，可以直接使用npm run build和npm run start命令了，實際上：

• · npm run build：相當於執行了當前專案中目錄下的webpack命令；
• · npm run start：相當於執行了node src/scripts/dev.js。

另外npm run start還可以簡寫成npm start。

Tips：除了 npm 外，還有一些包管理工具，主要是針對 npm 的下載速度慢、node_modules混亂等缺點設計的，例如yarn和pnpm。