在開始使用 Webpack 之前，我們需要對 Webpack 的配置有一定的認識。
5 大核心概念
- entry（入口）
指示 Webpack 從哪個文件開始打包
- output（輸出）
指示 Webpack 打包完的文件輸出到哪里去，如何命名等
- loader（加載器）
webpack 本身只能處理 js、json 等資源，其他資源需要借助 loader，Webpack 才能解析
- plugins（插件）
擴展 Webpack 的功能
- mode（模式）
主要由兩種模式：
- 開發(fā)模式：development
- 生產(chǎn)模式：production
準備 Webpack 配置文件
在項目根目錄下新建文件：webpack.config.js
module.exports = {
? // 入口
? entry: "",
? // 輸出
? output: {},
? // 加載器
? module: {
? ? rules: [],
? },
? // 插件
? plugins: [],
? // 模式
? mode: "",
};Webpack 是基于 Node.js 運行的，所以采用 Common.js 模塊化規(guī)范
修改配置文件
配置文件
// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
module.exports = {
? // 入口
? // 相對路徑和絕對路徑都行
? entry: "./src/main.js",
? // 輸出
? output: {
? ? // path: 文件輸出目錄，必須是絕對路徑
? ? // path.resolve()方法返回一個絕對路徑
? ? // __dirname 當前文件的文件夾絕對路徑
? ? path: path.resolve(__dirname, "dist"),
? ? // filename: 輸出文件名
? ? filename: "main.js",
? },
? // 加載器
? module: {
? ? rules: [],
? },
? // 插件
? plugins: [],
? // 模式
? mode: "development", // 開發(fā)模式
};運行指令
npx webpack此時功能和之前一樣，也不能處理樣式資源
小結
Webpack 將來都通過 webpack.config.js 文件進行配置，來增強 Webpack 的功能文章來源：http://www.zghlxwxcb.cn/news/detail-808844.html
我們后面會以兩個模式來分別搭建 Webpack 的配置，先進行開發(fā)模式，再完成生產(chǎn)模式文章來源地址http://www.zghlxwxcb.cn/news/detail-808844.html
到了這里，關于Webpack5入門到原理3：基本配置的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![[webpack] 基本配置 (一)](https://imgs.yssmx.com/Uploads/2024/02/638114-1.png)
