爲什麼要模塊化
javascript跟其他開發語言有很多的區別，其中一個就是沒有模塊化概念，如果一個項目中有多個js文件，我們只能通過script標籤引入的方式，把一個個js文件插入到頁面，這種做法會也引起了很多弊端：
- 需要手動維護JavaScript的加載順序
- 多次請求資源，影響了加載速度
- 在每個script標籤中，頂層作用域即全局作用域，如果沒有任何處理而直接在代碼中進行變量或函數聲明，就會造成全局作用域的污染，也會造成命名衝突。
模塊化很容易就避免這些問題，避免衝突，合併資源減少網絡開銷，通過導入和導出語句我們可以清晰地看到模塊間的依賴關係。
模塊打包工具
模塊打包工具（module bundler）的任務就是解決模塊間的依賴，使其打包後的結果能運行在瀏覽器上。它的工作方式主要分爲兩種：
- 將存在依賴關係的模塊按照特定規則合併爲單個JS文件，一次全部加載進頁面中。
- 在頁面初始時加載一個入口模塊，其他模塊異步地進行加載。
目前社區中比較流行的模塊打包工具有Webpack、Parcel、Rollup等。
Webpack是什麼
Webpack是一個開源的JavaScript模塊打包工具，其最核心的功能是解決模塊之間的依賴，把各個模塊按照特定的規則和順序組織在一起，最終合併爲一個JS文件（有時會有多個，這裏討論的只是最基本的情況）。這個過程就叫作模塊打包
Webpack的特點
- Webpack默認支持多種模塊標準，包括AMD、CommonJS，以及最新的ES6模塊，而其他工具大多隻能支持一到兩種。這對於一些同時使用多種模塊標準的工程非常有用，Webpack會幫我們處理好不同類型模塊之間的依賴關係。
- Webpack有完備的代碼分割（code splitting）解決方案。從字面意思去理解，它可以分割打包後的資源，首屏只加載必要的部分，不太重要的功能放到後面動態地加載。這對於資源體積較大的應用來說尤爲重要，可以有效地減小資源體積，提升首頁渲染速度。
- Webpack可以處理各種類型的資源。除了JavaScript以外，Webpack還可以處理樣式、模板，甚至圖片等，而開發者需要做的僅僅是導入它們。比如你可以從JavaScript文件導入一個CSS或者PNG，不過這些需要loader來處理。
- Webpack 使用異步I/O和多級緩存提高運行效率，這使得 Webpack能夠以令人難以置信的速度快速增量編譯。
- 擴展性強，插件機制完善，Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基於這個插件系統運行的，還可以開發和使用開源的 Webpack插件，來滿足各式各樣的需求。
安裝Webpack
安裝Webpack之前，需要安裝最新版本的node.js,它需要依賴node.js,使用 Node.js 最新的長期支持版本(LTS - Long Term Support),使用舊版本的node.js，可能會遇到一些問題，因爲它們可能缺少 webpack 功能以及/或者缺少相關 package 包。
我們使用node.js的包管理器npm安裝Webpack，安裝Webpack有兩種方式：
1.全局安裝：
npm install --g webpack
- 如果採用全局安裝，那麼在與他人進行項目協作的時候，由於每個人系統中的Webpack版本不同，可能會導致輸出結果不一致。
- 部分依賴於Webpack的插件會調用項目中Webpack的內部模塊，這種情況下仍然需要在項目本地安裝Webpack，而如果全局和本地都有，則容易造成混淆
2.本地安裝
npm install --save-dev webpack
如果你使用 webpack 4+ 版本，你還需要安裝 CLI。
npm install --save-dev webpack-cli
對於大多數項目，我們建議本地安裝。這可以使我們在引入破壞式變更(breaking change)的依賴時，更容易分別升級項目。
注意：由於我們將Webpack安裝在了本地，因此無法直接在命令行內使用“webpack”指令。項目內部只能使用npx webpack的形式.
初始化一個項目
使用npm init 首先初始化一個項目，首先在命令行內定位到所要放項目的文件夾，然後執行npm init，創建即可。如下圖
執行完之後，會生成一個pakeage.json文件,這個文件主要是用來記錄這個項目的詳細信息的，它會將我們在項目開發中所要用到的包，以及項目的詳細信息等記錄在這個項目中。使用npm init初始化項目,在進行項目傳遞的時候不需要將項目依賴包一起發送給對方，對方在接收到你的項目之後直接執行npm install就可以將項目所有的依賴全部下載到項目裏。
在項目內安裝webpack,webpack-cli：
npm install --save-dev webpack webpack-cli
Webpack.config.js 文件簡單配置
從之前我們在package.json中添加的腳本命令來看，當項目需要越來越多的配置時，就要往命令中添加更多的參數，那麼到後期維護起來就會相當困難。爲了解決這個問題，可以把這些參數改爲對象的形式專門放在一個配置文件裏，在Webpack每次打包的時候讀取該配置文件即可，Webpack的默認配置文件爲webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development'
}
Webpack對於output.path的要求是使用絕對路徑（從系統根目錄開始的完整路徑），之前我們在命令行中爲了簡潔所以使用了相對路徑。而在webpack.config.js中，我們通過調用Node.js的路徑拼裝函數——path.join，將__dirname（Node.js內置全局變量，值爲當前文件所在的絕對路徑）與dist（輸出目錄）連接起來，得到了最終的資源輸出路徑。
package.json 裏面的scripts配置文件添加打包參數， “build”: "webpack
{
"name": "webpacktest2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
// "test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "lanfeng",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}
執行npm run build，Webpack就會預先讀取webpack.config.js，然後進行打包。
index.js 文件
import firstDemo from './add-first.js';
document.write(firstDemo);
add-first.js
const test = 'Hello Webpack'
export default test
index.html 文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>First</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
預留效果如圖：
以上就是Webpack相關的介紹和簡單的配置方法。跟其他模塊化打包工具相比，Webpack是開發者使用較多的一款打包工具。
