本文由公眾號 位元組逆旅 的主筆 慢一拍 寫作而成，慢一拍 已認證成為圖雀社群專欄作者，後續將為大家帶來一系列 Webpack 的文章，敬請期待✌️。歡迎加入圖雀社群，一起創作精彩的免費技術實戰教程，加速技術的傳播！
如果您覺得我們寫得還不錯，記得 點贊 + 關注 + 評論 三連，鼓勵我們寫出更好的教程?
為什麼要用構建工具？如果你只會js+css+html，最多再加上jquery，那麼當你聽到構建工具這個說法是不是蒙的？這種情況下我不建議你學習webpack，建議你學下 vue 或者 react 框架，這兩個框架都有自己的腳手架，所謂腳手架就是別人用構建工具幫你搭好了原始專案，你可以在不懂構建工具的情況下進行前端開發。不過這就是初級前端的基本工作，給我一個環境，讓我安心的寫業務程式碼。
實際上，僅僅做上述工作也沒什麼不好，你可以鑽研 css，研究js深度語法，甚至去不斷精進演算法與資料結構都是高階進階之路。
我想說的是如果你有一天對webpack感興趣了，ok，歡迎你來到大前端世界！webpack是一個強大且可擴充套件的前端構建工具，還有包括grunt、gulp等同類工具都是基於node.js為底層驅動平臺實現的。
為什麼需要構建或者說編譯呢？因為像es6、less及sass、模板語法、vue指令及jsx在瀏覽器中是無法直接執行的，必須經過構建這一個操作才能保證專案執行，所以前端構建打包很重要。除了這些，前端構建還能解決一些web應用效能問題，比如：依賴打包、資源嵌入、檔案壓縮及hash指紋等。具體的我不再展開，總之前端構建工程化已經是趨勢。
至於為什麼選擇webpack，因為這個工具配置非常靈活，支援外掛化擴充套件，社群生態很豐富，官方迭代更新速度快，作為程式設計師，這是一個靠譜的選擇。
好了，廢話不多說，下面直接上乾貨，教你半小時上手，用webpack構建開發一個小專案。學東西要快，可以不用理解清楚每個概念，先動手，不然等你學會得要一個星期了。
一、node安裝
首先要保證你的電腦有node環境，node安裝比較簡單，直接在官網https://nodejs.org/en/下載node安裝包就可以了，注意這裡有兩個版本，左邊是穩定版本，右邊是最新版本，一般用穩定版本就可以了。具體的安裝過程不是本文的主要內容，網上有很多安裝教程。有了node環境，後面就可以通過npm進行webpack的安裝，npm是一個包管理工具，安裝node就會自動安裝npm。如果有必要我可以在我的公眾號裡也寫個教程。
二、webpack安裝及配置
1、webpack安裝
首先建立一個my_webpack資料夾作為專案資料夾，進入當前資料夾，通過命令列工具cmd執行以下命令：
npm init -y
npm install webpack webpack-cli --save-dev安裝完了檢查版本，確認安裝成功
./node_modules/.bin/webpack -v安裝成功後，資料夾下面會有這些內容
2、webpack配置
然後在根目錄建立一個空配置檔案webpack.config.js，建立以下內容：
'use strict'
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.join(__dirname,'dist'),
filename: 'index.js'
},
mode: 'production',
}entry代表打包入口，output需要指定輸出地址及打包出來的檔名，mode指開發環境。然後在專案根目錄中建立src資料夾及dist資料夾，src資料夾裡建立index.js及hellowebpack.js兩個檔案，最後在dist目錄建立一個index.html檔案，完整目錄如下：
hellowebpack.js檔案裡輸入以下內容：
export function hellowebpack() {
return 'hellowebpack'
}接著在index.js中引用hellowebpack.js檔案中的這個函式
import {hellowebpack} from './hellowebpack'
document.write(hellowebpack())這個時候到./node_modules/.bin/目錄下執行webpack打包命令，我們會看到dist目錄下多出一個index.js檔案，開啟會看到壓縮程式碼。
我們在dist目錄下的indext.html檔案建立如下內容，在瀏覽器開啟此頁面就能看到效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./index.js" type="text/javascript"></script>
</body>
</html>看到這應該明白了吧，在src目錄下面是開發內容，後面用 webpack 程式碼打包後，會在 dist 目錄下生成一個index.js 檔案，最後在index.html頁引用，這就是webpack打包專案的基本流程。
前面在執行打包要進入 ./node\_modules/.bin/ 目錄下執行 webpack打包命令，比較麻煩，這裡新增一個配置就可以更方便打包。在 package.json 檔案下的 script 節點新增一項配置 "build": "webpack"，然後再刪掉 dist 目錄，再執行 npm run build 就可以方便地打包了。
三、webpack入門示例
1、webpack解析es6
到這一步需要掌握一個新的概念：loaders，所謂loaders就是說把原本webpack不支援載入的檔案或者檔案內容通過loaders進行載入解析，實現應用的目的。這裡講解es6解析，原生支援js解析，但是不能解析es6，需要babel-loader ，而babel-loader 又依賴babel。來看步驟：先安裝babel-loader，
npm i @babel/core @babel/preset-env babel-loader -D再在根目錄建立 .babelrc 檔案，增加以下內容
{
"presets": [
"@babel/preset-env",
]
}接著在webpack.config.js檔案下新增module屬性，屬性內容是一個rules集合，內容如下
// ...
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
]
}
// ...rules集合的每個元素都是一個檔案型別的配置資訊，這裡只有一個js檔案，後面會講到css、less及各種格式的圖片等；test是一個正則，用來匹配檔案字尾名；use表示此loader名稱。
前面例子裡建立了hellowebapck.js檔案，然後在index.js檔案中被引用。裡面用到的import是es6方法，有的瀏覽器並不支援es6，如果直接用webpack打包在這瀏覽器上是會出錯的，但是剛才已經安裝並配置了babel-loader，可以實現解析es6方法，babel還可以解析jsx語法。現在執行npm run build進行構建，就可以看到效果是成功的。（這個其實用一個ie瀏覽器就可以驗證es6解析前後的效果）
2、webpack載入css、less等樣式檔案
css-loader用於載入css檔案並生成commonjs物件，style-loader用於將樣式通過style標籤插入到head中
安裝loader
npm i style-loader css-loader -D// ...
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
}
// ...注意，這裡的解析css用到了兩個loader，所以use物件裡是個陣列，需要格外注意到loader順序，是先寫style-loader，再寫css-loader,但是執行的時候是先載入css-loader，將css解析好後再將css傳遞給style-loader；
接下來在專案中加一個public.css檔案，在裡面寫入一個樣式：
.color-text {
font-size: 20px;
color: red
}將此檔案在src/index.js檔案中引用，如下所示。
我們知道此檔案做為打包入口檔案，最後打包後在dist目錄下，我們可以直接到dist目錄下的index.html檔案內，新增一個div標籤，加上樣式名color-text，以驗證樣式打包及引用效果
<body>
<script src="./index.js" type="text/javascript"></script>
<div class="color-text">text-color</div>
</body>
然後執行npm run build命令，執行成功後，在瀏覽器開啟dist目錄下index.html檔案，會看到以下內容，樣式檔案被成功打包併發揮了作用：
解析less檔案也是一樣的，直接把public.css檔案改成less字尾，此時是不能解析的，需要安裝less依賴，新增配置。
安裝less相關依賴
npm i less less-loader -D新增less檔案解析配置
// ...
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
]
}
// ...這些步驟完成後，再執行 npm run build 命令進行打包，最後在瀏覽器檢視 dist\index.html ，會發現效果是一樣的。
3、webpack載入圖片
圖片在webpack中的打包步驟跟上面類似，只不過loader不同。
安裝file-loader
執行以下命令，安裝file-loader依賴
npm i file-loader -D然後在webpack.config.js配置檔案 module 節點下新增解析配置內容：
{
test: /.(jpg|png|gif|jpeg)$/,
use: 'file-loader'
}隨便找一張圖片放在src目錄下，在同級目錄的public.css檔案中加上背景圖片樣式，輸入內容如下：
.color-text {
font-size: 20px;
color: red;
height: 500px;
background: url(beautiful.jpg) no-repeat;
}然後執行npm run build命令進行構建，最後執行時並沒有圖片展示，但是我們在dist目錄下發現了剛才打包過來的圖片，如圖所示。這就尷尬了，雖然圖片是打包過來了，問題是我每次還在拷貝複製一下名稱再引用，這很不科學。
有沒有更好的辦法載入圖片呢？答案是肯定的！看步驟：
安裝url-loader
npm i url-loader -Durl-loader直接內建了file-loader，是對它的再封裝，在配置檔案裡可以直接去掉file，用url替換。
在webpack.config.js檔案新增配置內容，注意limit是指圖片大小上限，單位是位元組，如果圖片大小小於這個值，就會被打包為base64格式，否則就仍是圖片。由於這個圖片有120K，我這裡設定為160000，差不多是150多K了。
{
test: /.(jpg|png|gif|jpeg)$/,
use: [{
loader:'url-loader',
options: {
limit:160000,
name: 'imgs/[name].[hash].[ext]'
}
}]
}執行npm run build檢視效果，發現成功了，再看dist目錄下的index.js檔案，發現內容多了很多，其實就是多了這張圖片的base64資料。
好了，這篇文章就寫到這裡，如果你按我的步驟來，一定可以輕鬆體驗入門。當然，要真正達到應用水平，還要繼續深入學習，webpack的內容還有很多，比如如何載入vue指令或者jsx語法，如何打包元件等，後面我會繼續帶來入門教程。
想要學習更多精彩的實戰技術教程？來圖雀社群逛逛吧。
如果您覺得我們寫得還不錯，希望您能給❤️這篇文章點贊❤️哦
本作品採用《CC 協議》，轉載必須註明作者和本文連結