核心概念
- entry（入口）
指示 Webpack 從哪個文件開始打包
- output（輸出）
指示 Webpack 打包完的文件輸出到哪里去，如何命名等
- loader（加載器）
webpack 本身只能處理 js、json 等資源，其他資源需要借助 loader，Webpack 才能解析
- plugins（插件）
擴展 Webpack 的功能
- mode（模式）
主要由兩種模式：
- 開發(fā)模式：development
- 生產模式：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
此時功能和之前一樣，也不能處理樣式資源。
開發(fā)模式介紹
開發(fā)模式顧名思義就是我們開發(fā)代碼時使用的模式。
這個模式下我們主要做兩件事：
- 編譯代碼，使瀏覽器能識別運行
開發(fā)時我們有樣式資源、字體圖標、圖片資源、html 資源等，webpack 默認都不能處理這些資源，所以我們要加載配置來編譯這些資源
- 代碼質量檢查，樹立代碼規(guī)范
提前檢查代碼的一些隱患，讓代碼運行時能更加健壯。
提前檢查代碼規(guī)范和格式，統(tǒng)一團隊編碼風格，讓代碼更優(yōu)雅美觀。文章來源：http://www.zghlxwxcb.cn/news/detail-828596.html
小結
Webpack 將來都通過?webpack.config.js?文件進行配置，來增強 Webpack 的功能。文章來源地址http://www.zghlxwxcb.cn/news/detail-828596.html
到了這里，關于【Webpack】基本配置的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
