webpack安裝，打包文件方法
一、爲什麼要使用webpack
因爲要解決一些項目痛點：
- 第三方插件管理雜亂不堪, 每次使用都需要重新導入
- CSS3新增屬性未添加私有前綴、ES678語法未進行適配,網頁兼容性低下
- 未對項目文件進行優化, 網頁性能低下
引入過多第三方資源請求次數增加, 本地js/css代碼壓縮,本地圖片壓縮等 - 未強制要求代碼規範, 部分代碼可能不符合企業要求
二、什麼是webpack?
- webpack是一套基於NodeJS的"模塊打包工具",
- 在webpack剛推出的時候就是一個單純的JS模塊打包工具,可以將多個模塊的JS文件合併打包到一個文件中（只管理js）
- 但是隨着時間的推移、衆多開發者的追捧和衆多開發者的貢獻
現在webpack不僅僅能夠打包JS模塊, 還可以打包CSS/LESS/SCSS/圖片等其它文件
三、爲什麼要分模塊?
- 如果將所有的JS代碼都寫到一個文件中, 十分不利於代碼的維護和複用
- 所以我們可以將不同的功能寫到不同的模塊中, 這樣就提升了代碼的維護性和複用性
- 但是當將代碼寫到不同模塊時新的問題又出現了,
例如: 導入資源變多了, 請求次數變多了, 網頁性能也就差了
例如: 不同功能都放到了不同模塊中了, 那麼如何維護模塊之間的關係也變成一個難題了（模塊之間的依賴關係，導入的先後順序）
例如:
<script src="./header.js"></script>
<script src="./content.js"></script>
<script src="./index.js"></script>
<script src="./footer.js"></script> // 如果index.js中用到了footer,就會報錯
四、如何解決上述問題——使用webpack
- 項目上線時將用到的所有模塊都合併到一個文件中,並且模塊代碼放前面，使用代碼放後面。
- 在index.html中只導入主文件, 在主文件中再導入依賴模塊
五、如何通過webpack來打包JS模塊
1. 安裝webpack
- 安裝NodeJS
- 在https://www.webpackjs.com/guides/installation/網站中，打開官方文檔中中文文檔——指南——安裝
![中文文檔]()
- 使用Npdejs安裝webpack共兩種方式：本地安裝和全局安裝（不推薦）。
- 使用本地安裝步驟：
- 文件夾（F:\學習\front-end\15.Webpack\01、webpack-打包JS文件> ）中初始化package.json文件：
npm init -y
- 要安裝最新版本或特定版本，請運行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack- 如果你使用 webpack 4+ 版本，你還需要安裝 CLI。
npm install --save-dev webpack-cli
2. 編寫模塊化代碼
案例：
header.js
function addHeader() {
let oDiv = document.createElement("div");
oDiv.innerText = "頭部";
document.body.appendChild(oDiv);
}
exports.addHeader = addHeader;
content.js
function addContent() {
let oDiv = document.createElement("div");
oDiv.innerText = "內容";
document.body.appendChild(oDiv);
}
exports.addContent = addContent;
footer.js
function addFooter() {
let oDiv = document.createElement("div");
oDiv.innerText = "底部";
document.body.appendChild(oDiv);
}
exports.addFooter = addFooter;
index.js
/*一下都是NodeJS語法，使用瀏覽器打開html文件會報錯，使用webpack打包後，將打包文件引入html不會報錯* */
const hModule = require("./header.js");
const cModule = require("./content.js");
const fModule = require("./footer.js");
hModule.addHeader();
cModule.addContent();
fModule.addFooter();
使用webpack打包後，直接在html文件中引入打包後的文件即可在瀏覽器中正確打開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01、webpack-打包JS文件</title>
/*直接引用NodeJS語法的文件，html會報錯
<script src="./header.js"></script>
<script src="./content.js"></script>
<script src="./footer.js"></script>
<script src="./index.js"></script>
*/
<script src="dist/main.js"></script>/*可以正確打開*/
</head>
<body>
</body>
</html>
3. 在終端中輸入打包的指令：npx webpack index.js
- 注意點:
index.js就是需要打包的文件，會將所有index.js依賴的文件打包至一個文件中。
打包之後的文件會放到dist目錄中, 名稱叫做main.js
此步驟可以用配置webpack文件的方式，而不是用終端輸入命令的方式，詳見：webpack配置文件寫法
4.在html文件中引入打包之後的文件main.js即可
