序

現在依舊記得第一次看到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 

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