當前Web開發面臨的困境

• 檔案依賴關係錯綜複雜
• 靜態資源請求效率低
• 模組化支援不友好
• 瀏覽器對高階JavaScript特性相容程度低
• etc......

webpack概述

webpack是一個流行的前端專案構建工具（打包工具），可以解決當前web開發中所面臨的困境。

webpack提供了友好的模組化支援，以及程式碼壓縮混淆、處理js相容性問題、效能優化等強大的功能，從而讓程式設計師把工作的重心放到具體的功能實現上，提高了開發效率和專案的可維護性。

目前絕大多數企業中的前端專案，都是基於webpack進行打包構建的。

webpack的基本使用

-1、建立列表隔行變色專案

• 新疆專案空白目錄，並執行 npm init -y 命令，初始化包管理配置檔案 package.json
• 建立 src 原始碼目錄
• 新建 src > index.htnl首頁
• 初始化首頁基本的結構
• 執行 npm install jquery -s 命令，安裝jQuery
• 通過模組化的形式，實現列表隔行變色的效果

-2、在專案中安裝和配置webpack

• 執行 npm install webpack webpack-cli -D 命令，安裝 webpack 相關的包
• 在專案根目錄中，建立名為 webpack.config.js 的webpack 配置檔案
• 在 webpack 的配置檔案中初始化如下基本配置：

moudle.exports = {
　　mode: 'development' //
 
 mdoe用來指定構建模式 development production（會壓縮）
}

• 在package.json 配置檔案中的 scripts 節點下，新增 dev 指令碼如下：

"scripts": {
　　"dev": "webpack" //script 節點下的指令碼，可以通過 npm run 執行
}

• 在終端執行 npm run dev 命令。啟動 webpack 進行專案打包。

-3、配置打包的入口與出口

webpack的4.x版本中預設約定：

• 打包的入口檔案為 src > index.js
• 打包的輸出檔案為 dist > main.js

如果要修改打包的入口與出口，可以在 webpack.config.js 中心增如下配置資訊：

const path = require('path') //匯入node.js 中專門操作路徑的模組
module.exports = {
　　entry: path.json(_dirname, './src/index.js'), // 打包入口檔案的路徑
　　output: {
　　　　path: peth.json(_dirname, './dist'), //輸出檔案的存放路徑
　　　　filename: 'bundle.js' //輸出檔案的名稱
　　}
}

-4、配置webpack的自動打包功能

• 執行 npm install webpack-dev-server -D 命令，安裝支援專案打包的工具
• 修改 package.json > scripts 中的 dev 命令如下:

"scripts": {
　　"dev": "webpack-dev-server" //script節點下的指令碼 可以通過npm run執行
}

• 將 src > index.html 中，script 指令碼的引用路徑，修改為 "buldle.js"
• 執行 npm run dev 命令，重新進行打包
• 在瀏覽器中訪問 http://localhost:8080 地址，檢視自動打包效果

注意：

1. webpack-dev-server 會啟動一個實時打包的 http 伺服器
2. webpack-dev-server 打包生成的輸出檔案，預設放到了專案根目錄中，而且是虛擬的、看不見的