什么是webpack？
目錄
一、面向過程的前端開發
二、面向對象的前端開發（代碼模塊化）
三、使用webpack打包器
四、webpack究竟是什么呢？
一、面向過程的前端開發
首先，讓我們來看一段面向過程的前端開發的代碼：
<!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><div id="webContent"></div><script>var webContent = document.getElementById('webContent');var header = document.createElement('div');header.innerText = '網頁標題';webContent.appendChild(header);var content = document.createElement('div');content.innerText = '網頁主體';webContent.appendChild(content);var footer = document.createElement('div');footer.innerText = '網頁頁腳';webContent.appendChild(footer);</script> </body> </html>網頁結果：
這種面向過程的代碼整合方式，使得所有JS代碼都"擠"在一個地方，代碼混亂，不具備代碼層次化，難于調試。
二、面向對象的前端開發（代碼模塊化）
所謂面向對象的前端開發，就是將整塊混合的代碼分割成一塊一塊，使得代碼模塊化，從而一個代碼模塊負責一部分的頁面邏輯。
讓我們來看將上面的示例模塊化后的代碼：
header.js：
function Header(){var header = document.createElement('div');header.innerText = '網頁標題';webContent.appendChild(header); }content.js:
function Content(){var content = document.createElement('div');content.innerText = '網頁主體';webContent.appendChild(content); }footer.js：
function Footer(){var footer = document.createElement('div');footer.innerText = '網頁頁腳';webContent.appendChild(footer); }index.js：
var webContent = document.getElementById('webContent');new Header(); new Content(); new Footer();dist.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><div id="webContent"></div><script src="./header.js"></script><script src="./content.js"></script><script src="./footer.js"></script><script src="./index.js"></script> </body> </html>網頁結果：
這樣將代碼模塊化后，使得代碼的邏輯變得清晰，更能呈現出業務場景。
但是，這種方式的模塊化也存在缺點：
①頁面加載速度變慢：
由于增加了js文件的數量，所以網頁需要發起更多次的http請求，導致了頁面加載速度變慢。
②無法直接在js代碼中看出js文件之間相互的存儲位置的關系，必須要通過dist.html文件才能查看。
③js文件必須按規定順序加載：
在dist.html文件中，header.js、content.js以及footer.js文件都必須在index.js文件之前加載完畢：
假如我們把header.js文件，放在index.js文件后面進行加載：
網頁的控制臺就會報錯：
三、使用webpack打包器
為了解決上面那種模塊化方式存在的缺點，我們依據ES module的規則改寫一點代碼，然后結合webpack來解決。
首先，我們來看改寫后的代碼：
header.js:
function Header(){var webContent = document.getElementById('webContent');var header = document.createElement('div');header.innerText = '網頁標題';webContent.appendChild(header); }export default Header;content.js:
function Content(){var webContent = document.getElementById('webContent');var content = document.createElement('div');content.innerText = '網頁主體';webContent.appendChild(content); }export default Content;footer.js:
function Footer(){var webContent = document.getElementById('webContent');var footer = document.createElement('div');footer.innerText = '網頁頁腳';webContent.appendChild(footer); }export default Footer;index.js:
import Header from './header.js'; import Content from './content.js'; import Footer from './footer.js';new Header(); new Content(); new Footer();dist.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><div id="webContent"></div><script src="./dist/main.js"></script> </body> </html>接下來，進入到上面這些文件的根目錄，我這里是進入到e:\webpack-demo，然后初始化npm環境（注意：做這些操作之前必須要先安裝node環境，可以參考這篇文章：
https://www.npmjs.com.cn/getting-started/installing-node/）：?www.npmjs.com.cn
?
接下來，一直回車就好。
然后，安裝webpack:
最后，運行npx webpack命令（Node 8.2+ 版本提供的 npx 命令，可以運行在初始安裝的 webpack 包(package)的?webpack?二進制文件，就是可以調用webpack中的webpack二進制文件程序）：
此時，會發現根目錄中出現了一個新的文件夾：
查看dist文件夾中的內容，可以發現有一個main.js文件，其實這個main.js文件是webpack將index.js、header.js、content.js、footer.js打包在一起的一個文件。
用瀏覽器直接打開dist.html文件，可以發現和原先的模塊化方法得到相同的結果：
四、webpack究竟是什么呢？
通過上面的示例，我們應該可以很清楚的知道webpack是一個打包器（bundler），它能將多個js文件打包成一個文件（其實不止能打包js文件，也能打包其他類型的文件，比如css文件，json文件等）。
可以查看官方文檔，官方文檔也明確表明webpack是一個打包器：
但是webpack不是一個翻譯器，它只能理解諸如"imort"、"from"等模塊導入語句，其他的JS語句等它是不能夠識別理解的。
總結
以上是生活随笔為你收集整理的什么是webpack？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： node.js和npm的关系
- 下一篇： 为什么vue前端项目要使用nodejs