很多還未接觸或剛接觸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，控制臺終端如下圖：
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相關內容，請持續關注本系列教程，謝謝！
