很多還未接觸或剛接觸Webpack的朋友總會覺得Webpack很難，要安裝這個安裝那個，要寫一大堆的配置，要輸一大堆的指令，還要學一大堆的文法，覺得學習成本太高，不用它代碼也可以寫得很好。是的，但是别擔心，本系列教程将會通過一些簡單執行個體帶你輕松入門Webpack，相信當你真正掌握它的時候，你一定會愛上它的！
一、Webpack簡介
1. 核心
① 入口(entry)
② 輸出(output)
③ loader
④ 插件(plugins)
2. 優勢
① 子產品化開發（import，require）
② 預處理（Less，Sass，ES6，TypeScript……）
③ 主流架構腳手架支援（Vue，React，Angular）
④ 龐大的社群（資源豐富，降低學習成本）
詳情請戳→
我為什麼要使用Webpack?3. 初學者誤區
① 要學會node.js
② 隻能用于簡單的代碼壓縮合并
③ 上線時要将整個項目檔案上傳伺服器
以上幾條都是初學者比較容易産生的誤區，而事實上……
① 我們确實需要安裝node.js，但基本隻是需要它提供的環境及npm而已，你不一定要掌握node.js文法
② Webpack非常強大，不僅僅可以實作代碼的壓縮合并，還能進行一些預編譯處理以及子產品化開發等
③ 我們隻需要将Webpack打包出來的檔案目錄上傳到伺服器即可，而不是上傳整個項目檔案
二、準備工作
1. 安裝node.js
Webpack本身是基于node.js環境的，是以我們需要先安裝node.js，具體方法可以看這裡→
Node.js——通往全棧之路（一）。
2. 建立項目
① 建立目錄結構
在新建立的項目檔案夾下，建立兩個基礎檔案夾：src和dist，其中src是我們開發時源代碼所放置的檔案夾，dist是我們使用Webpack打包後代碼輸出的目标檔案夾，也就是說最終我們上傳伺服器的代碼都是從dist檔案夾下擷取。目錄結構大緻如下：
② 建立一個package.json檔案
package.json檔案是在node.js環境下開發項目必須要使用到的檔案，該檔案主要用于配置項目入口、腳本和項目所需安裝的依賴等等。我們可以自己手動建立，也可以通過指令行自動建立它。指令行建立很簡單，直接在控制台終端輸入
npm init
，然後一直回車即可輕松建立一個最基礎的package.json檔案。
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
小貼士： 建議使用開發工具中自帶的控制台終端，非常友善，自動定位目前項目檔案夾，無需手動切換。比如我使用的開發工具是WebStorm，控制台終端如下圖：
Terminal
3. 安裝Webpack
依次輸入指令行
npm i -D webpack
和
npm i -D webpack-cli
回車進行本地安裝，其中
i
是
install
的縮寫，
-D
--save-dev
的縮寫，也就是說這兩個指令行也可以寫成
npm install --save-dev webpack
npm install --save-dev webpack-cli
安裝後的目錄結構如下：
package.json檔案如下：
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}
4. 建立webpack.config.js檔案
該檔案是Webpack的配置檔案，也是項目運作的入口檔案，基礎寫法如下：
module.exports = {
entry: './src/scripts/index.js', // 需要被打包的js檔案路徑及檔案名
output: {
path: __dirname + '/dist', // 打包輸出的目标檔案的絕對路徑（其中__dirname為目前目錄的絕對路徑）
filename: 'scripts/index.js' // 打包輸出的js檔案名及相對于dist目錄所在路徑
}
};
三、開始打包
1. 建立需要被打包的js檔案
我們給這個index.js檔案寫入點代碼：
//index.js
alert('Hello Webpack!');
2. 開始打包
輸入指令行： npx webpack
由于我們已經在webpack.config.js檔案配置了打包的相關路徑及檔案名，是以最終打包後我們就可以在dist目錄下看到我們想要的輸出結果，打包後整體目錄結構如下：
3. 使用打包後的js代碼
現在我們已經獲得打包後的代碼，接下來我們應該使用它，測試它是否能正常運作。
我們可以在dist目錄下手動建立一個HTML檔案，并引入這個已經打包成功的js檔案。目錄結構及HTML代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="scripts/index.js"></script>
</body>
</html>
打開這個index.html頁面後，我們發現浏覽器彈出“Hello Webpack!”提示框，說明代碼确實已經打包成功。
本文重點總結：
成功運作Webpack基本流程如下：
① 安裝node.js
② 建立項目目錄和建立package.json
③ 安裝webpack和webpack-cli
④ 建立webpack.config.js
⑤ 開始打包你的js代碼
結束語： 本文隻是對Webpack成功打包js代碼的最基礎講解，如需了解更多Webpack相關内容，請持續關注本系列教程，謝謝！
![HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)