前端工程化09-webpack靜態的模塊化打包工具(未完結)

9.1、開發模式的進化歷史

webpacks是一個非常非常的強大的一個工具，相應的這個東西的學習也是有一定的難度的，里邊的東西非常的多，里面涉及到的

概念的話也是非常非常的多的。

這個東西既然非常重要，那么在我們前端到底處于怎樣的一個地位呢？

有些人學習到這個階段已經分不清楚了，到底什么是node,什么是npm/什么是webpack,所以我們有必要了解下前端開發的架構圖

目前我們前端比較流行的三大框架，Vue/React/Angular/,國內用Angular的非常少，如果公司需要你會，那么可以研究下，如果不

是就沒有必要把太多的精力放到、Angular上，本身這個東西的需求比較少，崗位也比較少，那么這個時候你花費更多時間學習

Angular是沒有什么太大的回報的，但是不可否認Angular是一個非常優秀的框架，他里邊的架構設計也是非常優秀的~后續聊，目

前我們國內用的最多的還是Vue和React

我們目前的開發模式已經不是以前的那種模式，我先創建一個index.html，然后寫標簽寫內容，下幾個js文件，引入到項目里，在

寫對應的js,寫css什么的

現在的模式，假如你現在要開發一個旅游項目，先考慮用什么包管理工具，用npm還是用yarn,之后在確定給你的項目用到的打包

工具webpack,然后在當前的架構下邊確定用什么前端框架開發，比如Vue,React,Angular,在寫具體的代碼，有人說了，那我不會

搭建這個架構怎么辦，這個不需要擔心，因為現在，你不管去開發Vue項目還是開發React這個項目，他們都有對應的腳手架來幫

助你進行快速開發，所謂的腳手架，不管是Vue的還是React的他們呢都是基于Webpack的。

9.2、Webpack使用Node內置的Path模塊

path模塊是node的內置模塊，通常用于對路徑和文件進行處理，提供了很多好用的方法

我們知道在Mac OS、Linux和window上的路徑時不一樣的

window上會使用 \或者 \ 來作為文件路徑的分隔符，當然目前也支持 /；
在Mac OS、Linux的Unix操作系統上使用 / 來作為文件路徑的分隔符；

那么如果我們在window上使用 \ 來作為分隔符開發了一個應用程序，要部署到Linux上面應該怎么辦呢？

顯示路徑會出現一些問題；
所以為了屏蔽他們之間的差異，在開發中對于路徑的操作我們可以使用 path 模塊；

可移植操作系統接口（英語：Portable Operating System Interface，縮寫為POSIX）

Linux和Mac OS都實現了POSIX接口；
Window部分電腦實現了POSIX接口；

9.3、path模塊常見的API

從路徑中獲取信息

dirname：獲取文件的父文件夾；
basename：獲取文件名；
extname：獲取文件擴展名；

路徑的拼接：path.join

如果我們希望將多個路徑進行拼接，但是不同的操作系統可能使用的是不同的分隔符；
這個時候我們可以使用path.join函數；

拼接絕對路徑：path.resolve

path.resolve() 方法會把一個路徑或路徑片段的序列解析為一個絕對路徑；
給定的路徑的序列是從右往左被處理的，后面每個 path 被依次解析，直到構造完成一個絕對路徑；
如果在處理完所有給定path的段之后，還沒有生成絕對路徑，則使用當前工作目錄；
生成的路徑被規范化并刪除尾部斜杠，零長度path段被忽略；如果沒有path傳遞段，
path.resolve()將返回當前工作目錄的絕對路徑；

9.4、path模塊在webpack中的使用

9.5、正確認識webpack

事實上隨著前端的快速發展，目前前端的開發已經變的越來越復雜了：

比如開發過程中我們需要通過模塊化的方式來開發；
比如也會使用一些高級的特性來加快我們的開發效率或者安全性，比如通過ES6+、TypeScript開發腳本邏輯，通過sass、less等方式來編寫css樣式代碼；
比如開發過程中，我們還希望實時的監聽文件的變化來并且反映到瀏覽器上，提高開發的效率；
比如開發完成后我們還需要將代碼進行壓縮、合并以及其他相關的優化；
等等

但是對于很多的前端開發者來說，并不需要思考這些問題，日常的開發中根本就沒有面臨這些問題：

這是因為目前前端開發我們通常都會直接使用三大框架來開發：Vue、React、Angular；
但是事實上，這三大框架的創建過程我們都是==借助于腳手架（CLI）==的；
事實上Vue-CLI、create-react-app、Angular-CLI都是基于webpack來幫助我們支持模塊化、less、TypeScript、打包優化等的；

工程化章節會去學習一些webpack的高級特性

9.6、腳手架依賴于webpack

9.7、Webpack到底是什么呢？

我們先來看一下官方的解釋：

webpack is a static module bundler for modern JavaScript applications.

webpack是一個靜態的模塊化打包工具，為現代的JavaScript應用程序；

打包bundler：webpack可以將幫助我們進行打包，所以它是一個打包工具
靜態的static：這樣表述的原因是我們最終可以將代碼打包成最終的靜態資源（部署到靜態服務器）；
模塊化module：webpack默認支持各種模塊化開發，ES Module、CommonJS、AMD等；
現代的modern：我們前端說過，正是因為現代前端開發面臨各種各樣的問題，才催生了webpack的出現和發展；

Webpack官網的圖片

9.8、Vue項目加載的文件有哪些呢？

JavaScript的打包：

將ES6轉換成ES5的語法；
TypeScript的處理，將其轉換成JavaScript；

Css的處理：

CSS文件模塊的加載、提取；
Less、Sass等預處理器的處理；

資源文件img、font：

圖片img文件的加載；
字體font文件的加載；

HTML資源的處理：

打包HTML資源文件；

處理vue項目的SFC文件.vue文件；

9.1、Webpack的使用前提

webpack的官方文檔是https://webpack.js.org/

webpack的中文官方文檔是https://webpack.docschina.org/
DOCUMENTATION：文檔詳情，也是我們最關注的

Webpack的運行是依賴Node環境的，所以我們電腦上必須有Node環境

所以我們需要先安裝Node.js，并且同時會安裝npm；
我當前電腦上的node版本是v16.15.1，npm版本是8.11.0（你也可以使用nvm或者n來管理Node版本）；
Node官方網站：https://nodejs.org/

9.2、Webpack的安裝

webpack的安裝目前分為兩個：webpack、webpack-cli

注意：從webpack4版本開始，你要想安裝webpack就必須要同時安裝倆東西。這個webpack-cli在用的時候是我們在命令行中使用webpack,必須要用的一個東西,

這個東西的作用是他會識別我們的命令行，假如說你是通過代碼的方式來使用webpack的，比如const webpack=require(“webpack”) ,webpack.compile(),編譯某

個文件，如果我自己寫代碼打包，那就不需要webpack-cli,但是我們目前使用webpack都是在命令行輸入命令webpack --entry,

為了識別這個命令,都是webpack-cli在做的，

那么它們是什么關系呢？

執行webpack命令，會執行node_modules下的.bin目錄下的webpack；
webpack在執行時是依賴webpack-cli的，如果沒有安裝就會報錯；
而webpack-cli中代碼執行時，才是真正利用webpack進行編譯和打包的過程；
所以在安裝webpack時，我們需要同時安裝webpack-cli（第三方的腳手架事實上是沒有使用webpack-cli的，而是類似于自己的vue-service-cli的東西）

npm install webpack webpack-cli –g # 全局安裝
npm install webpack webpack-cli –D # 局部安裝

全局安裝在那敲命令都能用

那一般來說，是局部安裝多還是全局安裝多一點

一般是局部安裝多一點，為什么？

假如說你的電腦里邊有仨項目，分別是Vue2的、Vue3的項目、React的項目，這個三個項目都需要進行打包，但是不可能他們依賴的webpack版本完全一樣，大概率是不一樣的。所以每個項目里邊有自己webpack

9.3、創建局部的webpack

前面我們直接執行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步驟來操作。

第一步：創建package.json文件，用于管理項目的信息、庫依賴等

npm init

第二步：安裝局部的webpack

npm install webpack webpack-cli -D

第三步：使用局部的webpack

npx webpack

第四步：在package.json中創建scripts腳本，執行腳本打包即可

npm run build

9.4、Webpack的默認打包

我們可以通過webpack進行打包，之后運行打包之后的代碼

在目錄下直接執行 webpack 命令
- webpack

生成一個dist文件夾，里面存放一個main.js的文件，就是我們打包之后的文件：

這個文件中的代碼被壓縮和丑化了；
另外我們發現代碼中依然存在ES6的語法，比如箭頭函數、const等，這是因為默認情況下webpack并不清楚我們打包后的文件是否需要轉成ES5之前的語法，后續我們需要通過babel來進行轉換和設置；

我們發現是可以正常進行打包的，但是有一個問題，webpack是如何確定我們的入口的呢？

事實上，當我們運行webpack時，webpack會查找當前目錄下的 src/index.js作為入口；
所以，如果當前項目中沒有存在src/index.js文件，那么會報錯；

當然，我們也可以通過配置來指定入口和出口

#改index.js生成的文件名
npx webpack --entry ./src/main.js --output-filename ./bundle.js
#改生成的dist目錄名
npx webpack --entry ./src/main.js --output-filename ./bundle.js  --output-path ./build

但是一般這個目錄太長了，我們不會這么寫的，都是配置一個配置文件

9.5、Webpack配置文件

在通常情況下，webpack需要打包的項目是非常復雜的，并且我們需要一系列的配置來滿足要求，默認配置必然是不可以的。

我們可以在根目錄下創建一個webpack.config.js文件，來作為webpack的配置文件：

繼續執行webpack命令，依然可以正常打包

npm run build

const path = require("path")module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build")}
}