序

現在依舊記得第一次看到webpack3.x 版本配置時候的狀態  剛開始看到這些真的是一臉懵。希望這篇文章能幫到剛開始入門的同學。

webpack 是什麼？

webpack是一個模組化打包工具，webpack 通過入口分析專案結構，找到JavaScript模組以及一些不能直接在瀏覽器上執行的語言、語法等 如（scss、ts、es6+等），並將其打包成可以直接在瀏覽器執行的js，以及壓縮、加密、按需載入等。

相關概念

• Entry：入口，webpack執行構建的第一步將從Entry開始，可理解為輸入 
• Module：模組，在webpacl中一切皆為模組，一個模組對應一個檔案，webpack會從配置的Entry開始遞迴找出所有依賴的模組
• Chunk：程式碼塊，一個chunk由多個模組組合而成，用於將程式碼合併和分割 
• Loader：模組轉換器，用於把模組原內容按照需求轉換為需要的新內容 
• Plugin：擴充套件外掛，在webpack構建流程中的特定時機注入擴充套件邏輯來改變構建結果和想要做的事情 
• Output：輸入結果，在webpack經過一系列處理並得到最終想要的程式碼然後輸出結果
• runTime：在瀏覽器執行時，連線模組的聯結器
• manifest：webpack 編譯時記錄所有模組的詳細資訊的資料集合（聯結器來這裡查詢具體的模組）

 環境搭建

1、先用npm初始化一個專案，得到 package.json 檔案

1 npm init -y 或者
2 npm init // 這個要填寫一些資訊 如 名稱 郵箱 版本 等等

2、安裝webpack 4 將CLI 獨立出來了，所以需要安裝兩個包

1  npm install webpack webpack-cli -D

 webpack-cli 我覺得全域性安裝比較方便，命令列全域性安裝不會造成版本衝突之類的。根據官網的api，現在我們可以進行打包了。

但是為了更加方便的打包我們需要用到npm script 功能（簡單的說就是臨時把node_modules 路徑加到系統環境變數）。

先建立好相關檔案如 webpack.config.js

在package.json  scripts 中加入

1 "build:dev": "webpack --mode development"

在webpack.config.js 中匯出一個最簡單的物件給webpack

 1 'use strict'
 2 const path = require('path')
 3 
 4 // path
 5 function resolve (dir) {
 6   return path.join(__dirname, dir)
 7 }
 8 
 9 module.exports = {
10   mode: 'development',
11   entry: {
12     app: './main.js'
13   },
14   output: {
15     filename: '[name]-[hash].js',
16     path: path.resolve(__dirname, 'dist'),
17     publicPath: './'
18   }
19 
20 }

在視窗執行 

1 npm run build:dev

不出問題，應該是打包成功了。

原始碼

   https://github.com/ben-Run/webpack-learn 

   要是幫到你了可以點下strat， 哈哈~~~

 &n