在開(kāi)始使用webpack之前么，我們需要對(duì)Webpack的配置有一定的認(rèn)識(shí)。
一、5大核心概念
1. enty（入口）
指示webpack從哪個(gè)文件開(kāi)始打包
2. output（輸出）
指示webpack打包完的文件輸出到哪里去，如何命名等
3. loader（加載器）webpack本身只能處理js、json等資源，其他資源需要借助loader、webpack才能解析
4. plugins（插件）
擴(kuò)展webpack的功能
5. mode（模式）
主要有兩種模式：
● 開(kāi)發(fā)模式：development
● 生產(chǎn)模式：production
二、準(zhǔn)備 Webpack 配置文件
在項(xiàng)目根目錄下創(chuàng)建文件：webpack.config.js
module.exports = {
// 入口
entry: "",
// 輸出
output: {},
// 加載器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "",
};
Webpack 是基于Node.js運(yùn)行的，所以采用Common.js模塊化規(guī)范
三、修改配置文件
const path = require("path");
module.exports = {
// 入口
entry: "./src/main.js", // 需要用相對(duì)路徑
// 輸出
output: {
// 文件的輸出路徑
// __dirname nodejs的變量，代表當(dāng)前文件的文件夾目錄
path: path.resolve(__dirname, "dist"), // 需要用絕對(duì)路徑 需要用的Nodejs的核心模塊 path，專門(mén)處理路徑問(wèn)題
// 文件名
filename: "main.js",
},
// 加載器
module: {
rules: [
// loader的配置
],
},
// 插件
plugins: [
// plugin的配置
],
// 模式
mode: "development",
};
四、開(kāi)發(fā)模式介紹
開(kāi)發(fā)模式顧名思義就是我們開(kāi)發(fā)代碼時(shí)使用的模式。
這個(gè)模式下我們主要做兩件事：
1、編譯代碼，使瀏覽器能識(shí)別和運(yùn)行。
開(kāi)發(fā)時(shí)我們有樣式資源、字體圖片、圖片資源、多媒體資源、HTML資源等，webpack默認(rèn)都不能處理這些，我們需要加載配置來(lái)編譯這些資源文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-833055.html
2、代碼質(zhì)量檢測(cè)，樹(shù)立代碼規(guī)范
提前檢查代碼的一些可以消除一定隱患與Bug、代碼運(yùn)行起來(lái)更加健壯。
提前檢查代碼規(guī)范和格式，統(tǒng)一團(tuán)隊(duì)編碼風(fēng)格，讓代碼更優(yōu)雅與美觀。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-833055.html
到了這里，關(guān)于【快速搞定Webpack5】基本配置及開(kāi)發(fā)模式介紹（二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[webpack] 基本配置 (一)](https://imgs.yssmx.com/Uploads/2024/02/638114-1.png)
