1. 什么是webpack？
Webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器。它是一個(gè)用于將代碼編譯成瀏覽器可識(shí)別的格式的工具。
webpack 可以實(shí)現(xiàn)以下的功能：
-
代碼轉(zhuǎn)換：
TypeScript編譯成JavaScript、SCSS、less編譯成CSS等。 -
文件優(yōu)化：壓縮
JavaScript、CSS、HTML代碼，壓縮合并圖片等。 - 代碼分割：提取多個(gè)頁面的公共代碼、提取首屏不需要執(zhí)行部分的代碼讓其異步加載。
- 模塊合并：在采用模塊化的項(xiàng)目里會(huì)有很多個(gè)模塊和文件，需要構(gòu)建功能把模塊分類合并成一個(gè)文件。
- 自動(dòng)刷新：監(jiān)聽本地源代碼的變化，自動(dòng)重新構(gòu)建、刷新瀏覽器。
- 代碼校驗(yàn)：在代碼被提交到倉庫前需要校驗(yàn)代碼是否符合規(guī)范，以及單元測試是否通過。
- 自動(dòng)發(fā)布：更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。
- 依賴管理：通過分析模塊之間的依賴關(guān)系，自動(dòng)加載所需的依賴模塊。
- 插件擴(kuò)展：通過插件擴(kuò)展功能，滿足不同項(xiàng)目的需求。
構(gòu)建其實(shí)是工程化、自動(dòng)化思想在前端開發(fā)中的體現(xiàn)，把一系列流程用代碼去實(shí)現(xiàn)，讓代碼自動(dòng)化地執(zhí)行這一系列復(fù)雜的流程。 構(gòu)建給前端開發(fā)注入了更大的活力，解放了我們的生產(chǎn)力。
Webpack的工作原理是從一個(gè)入口文件開始，遞歸地解析出所有的依賴，然后將這些依賴打包成一個(gè)或多個(gè)輸出文件。Webpack 支持多種模塊化規(guī)范，包括CommonJS、AMD、ES6模塊等。
2. webpack使用
2.2. 前置知識(shí)
- node基礎(chǔ)
- 包的理解
- 模塊化思想
2.1. 創(chuàng)建一個(gè)項(xiàng)目
-
創(chuàng)建一個(gè)文件夾
-
創(chuàng)建一個(gè)package.json文件
npm init -y
-
安裝依賴
npm install webpack webpack-cli webpack-dev-server style-loader css-loader html-webpack-plugin cross-env mini-css-extract-plugin less less-loader postcss postcss-loader autoprefixer @babel/core @babel/preset-env babel-loader typescript ts-loader @babel/preset-typescript eslint eslint-webpack-plugin eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node @typescript-eslint/eslint-plugin --save
3. webpack打包
3.1. 創(chuàng)建一個(gè)webpack.config.js文件
webpack中文文檔
3.2. 入口（entry）
-
entry選項(xiàng)用于指定Webpack打包的入口文件，即告訴Webpack從哪個(gè)文件開始打包
3.2.1. webpack.config.js
module.exports = {
entry: "./src/index.js",
};
3.2.2. src/index.js
let a = 1;
console.log(a);
3.2.3. package.json
"scripts": {
"build": "webpack"
},
運(yùn)行 npm run build 查看結(jié)果：
默認(rèn)生成了一個(gè)dist文件，這就是打包后的代碼。
3.3. 輸出（output）
-
output選項(xiàng)用于指定Webpack打包后輸出的文件和路徑，即告訴Webpack打包后的文件應(yīng)該放在哪個(gè)目錄下以及如何命名 -
output通常配置為一個(gè)對(duì)象，包含了多個(gè)屬性-
path指定了打包文件的輸出路徑，必須是一個(gè)絕對(duì)路徑 -
filename指定了打包后的文件名，可以包含路徑信息
-
3.3.1. webpack.config.js
const path = require("path"); // nodeJs 的 path 模塊
module.exports = {
// entry：默認(rèn)的路徑是src/index.js，也可以自定義
entry: "./src/index.js",
output: {
// 打包文件的輸出位置
path: path.resolve(__dirname, "dist"),
// 打包后的文件名
filename: "index.js",
},
};
運(yùn)行 npm run build 之后的效果:
- 根文件下生成了一個(gè) dist 文件夾，作為打包后輸出文件
- dist 中生成了一個(gè) index.js 文件。由默認(rèn)的 main.js 文件變成了我們自定義的 index.js 文件，其他內(nèi)容沒有變化。
3.4. 加載器（loader）
-
loader是Webpack的一個(gè)關(guān)鍵功能，它可以處理各種各樣的文件類型。 -
Webpack將一切文件視為模塊，但只有JS模塊才能被直接運(yùn)行和使用 -
Loader可以將非JS模塊（如CSS、圖片等）轉(zhuǎn)換為Webpack可以處理的有效模塊 -
loader是在“webpack.config.js”文件中使用“module”屬性指定的。每個(gè)loader都定義為一個(gè)對(duì)象，該對(duì)象具有指定loader應(yīng)處理哪些文件的“test”屬性和指定要使用的加載程序的“use”屬性。
例如，loader可以用于將Sass或Less文件轉(zhuǎn)換為CSS，或者將ES6代碼轉(zhuǎn)換為可以由舊瀏覽器執(zhí)行的ES5代碼。
3.4.1. src/index.js
import "./index.css";
console.log(123);
3.4.2. src/index.css
body {
background-color: red;
color: blue;
}
注意：此時(shí)運(yùn)行npm run build 會(huì)報(bào)錯(cuò)，由于瀏覽器只認(rèn)識(shí)js代碼，因此在webpack中需要將其他的代碼進(jìn)行處理，此時(shí)需要使用style-loader、css-loader來處理我們的css代碼。
3.4.3. webpack.config.js
- 每個(gè)
Loader規(guī)則由兩部分組成：匹配條件和處理方式 - 匹配條件通常使用正則表達(dá)式，用于匹配需要被轉(zhuǎn)換的文件
-
處理方式則是具體的轉(zhuǎn)換操作
-
test屬性指定了匹配的文件類型 -
use屬性指定了轉(zhuǎn)換方式 -
exclude用于指定哪些文件或目錄不應(yīng)該被 loader 處理 -
css-loader作用是將CSS代碼轉(zhuǎn)換為JavaScript代碼 -
css-loader可以識(shí)別@import和url()等語句，實(shí)現(xiàn) CSS 模塊的引用和解析 -
style-loader用于將css-loader轉(zhuǎn)換后的JavaScript對(duì)象，以style標(biāo)簽的形式動(dòng)態(tài)插入到 HTML 文件中(動(dòng)態(tài)創(chuàng)建style標(biāo)簽，然后放到head標(biāo)簽中)
-
module.exports = {
// ......
module: {
rules: [
{
test: /\.css$/, // 匹配以 .css 結(jié)尾的文件
use: ["style-loader", "css-loader"], // 注意：loader執(zhí)行順序是從后往前執(zhí)行，順序不能改變
},
]
},
};
可以看到，此時(shí)運(yùn)行 npm run build 已經(jīng)打包成功了：
測試：在dist目錄下創(chuàng)建一個(gè)html文件，測試一下樣式是否生效：
可以看到，此時(shí)樣式已經(jīng)生效了：
例子：css代碼通過loader轉(zhuǎn)換成瀏覽器可識(shí)別代碼的模擬過程（偽代碼）：
/**
* 模擬 css 樣式大概轉(zhuǎn)換過程
*/
// 1. webpack 將css讀取出來
let cssCode = `body {
background-color: red;
color: blue;
}`;
// 2. css-loader將css代碼轉(zhuǎn)換成js代碼
let cssModule = `
module.exports = "
body {
background-color: red;
color: blue;
}
"
`;
// 3. style-loader將css-loader轉(zhuǎn)換的內(nèi)容經(jīng)過處理。放到動(dòng)態(tài)創(chuàng)建的style標(biāo)簽中，變成瀏覽器能讀取的代碼
let style = document.createComment("style");
style.innerHTML = cssModule;
document.head.appendChild(style);
3.5. 插件（plugin）
Webpack 插件是用于擴(kuò)展 Webpack 功能的 JavaScript 對(duì)象。它們可以用于各種用途，例如打包輸出優(yōu)化、資源管理和代碼壓縮等。以下是一些常見的 Webpack 插件及其功能：
-
UglifyJSPlugin：用于壓縮 JavaScript 代碼，減少文件大小并提高頁面加載速度。 -
HtmlWebpackPlugin：用于生成 HTML 文件，并將打包后的 JavaScript 和 CSS 文件自動(dòng)添加到 HTML 文件中。 -
ExtractTextWebpackPlugin：用于將 CSS 代碼從 JavaScript 文件中提取出來，并將其保存為單獨(dú)的 CSS 文件。 -
CleanWebpackPlugin：用于在打包之前清除之前的打包文件。 -
CopyWebpackPlugin：用于將文件或文件夾從源目錄復(fù)制到輸出目錄。 -
ProvidePlugin：用于自動(dòng)加載模塊，而不必使用 import 或 require 語句。
例子：通過 HtmlWebpackPlugin 插件生成 HTML 文件，并將打包后的 JavaScript 和 CSS 文件自動(dòng)添加到 HTML 文件中
- 創(chuàng)建模板文件
src/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板文件</title>
</head>
<body>
模板文件
</body>
</html>
- webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html的插件，并自動(dòng)將打包后的 JS、CSS 文件引入 HTML 文件中
module.exports = {
// ......
module: {
// ......
},
plugins: [
// 插件使用時(shí)，像構(gòu)造函數(shù)一樣直接 new 即可
// template：模板文件的路徑
// filename：打包后生成的文件名
// chunk：代碼塊
new HtmlWebpackPlugin({ template: "./src/index.html" }),
],
};
- 運(yùn)行
npm run build，查看打包后的dist文件，此時(shí)已經(jīng)生成了index.html文件
3.6. devServer
-
webpack-dev-server是一個(gè)基于Express的Web 服務(wù)器，它可以為Webpack打包后的代碼提供一個(gè)本地開發(fā)環(huán)境，支持實(shí)時(shí)刷新、熱替換和自動(dòng)構(gòu)建等功能，大大提高了開發(fā)效率-
static：靜態(tài)資源目錄的路徑，設(shè)置該參數(shù)可以在服務(wù)器中訪問這些靜態(tài)資源 -
compress：啟用 gzip 壓縮，默認(rèn)是關(guān)閉的 -
port：服務(wù)器端口，默認(rèn)是 8080 -
host：服務(wù)器主機(jī)名，默認(rèn)是 localhost -
open：是否自動(dòng)在瀏覽器中打開頁面，默認(rèn)是關(guān)閉的 -
hot：啟用模塊熱替換功能，默認(rèn)是關(guān)閉的 -
watchFiles：需要監(jiān)聽的文件列表，當(dāng)這些文件發(fā)生變化時(shí)，自動(dòng)重啟服務(wù)器 -
historyApiFallback：參數(shù)用于設(shè)置是否啟用HTML5歷史記錄API，用于處理單頁應(yīng)用的路由問題。默認(rèn)情況下，當(dāng)使用瀏覽器的前進(jìn)/后退按鈕時(shí)，devServer會(huì)嘗試根據(jù) URL 路徑查找對(duì)應(yīng)的靜態(tài)資源，如果找不到就返回404。如果啟用了historyApiFallback，則會(huì)將這些請(qǐng)求重定向到index.html，然后交給前端路由來處理
-
- 在命令行中運(yùn)行
webpack-dev-server命令后，webpack-dev-server將會(huì)啟動(dòng)一個(gè)本地Web服務(wù)器，并監(jiān)聽我們定義的端口。我們可以在瀏覽器中訪問http://localhost:9000，即可預(yù)覽打包后的頁面，并實(shí)現(xiàn)實(shí)時(shí)刷新和熱替換功能
3.6.1. webpack.config.js
devServer: {
static: path.join(__dirname, "public"), // 靜態(tài)資源路徑
compress: true, // 是否開始gzip壓縮
host: "localhost", // 服務(wù)器主機(jī)名
port: 80, // 服務(wù)器端口名
open: true, //啟動(dòng)項(xiàng)目后是否自動(dòng)打開瀏覽器
hot: true, // 是否啟動(dòng)模塊熱替功能
historyApiFallback: true, // 處理單頁應(yīng)用的路由問題
watchFiles: ["src/**/*.js", "src/**/*.css"], // 需要監(jiān)聽的文件列表，當(dāng)這些文件發(fā)生變化時(shí)，自動(dòng)重啟服務(wù)器
},
3.6.2. package.json
文章來源：http://www.zghlxwxcb.cn/news/detail-583220.html
"scripts": {
"dev": "webpack serve",
"build": "webpack"
},
運(yùn)行 npm run dev，可以發(fā)現(xiàn)此時(shí)項(xiàng)目已經(jīng)啟動(dòng)了：
文章來源地址http://www.zghlxwxcb.cn/news/detail-583220.html
到了這里，關(guān)于前端工程化第一章：webpack基礎(chǔ)（上）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
