基本配置
在開始使用 Webpack 之前，我們需要對 Webpack 的配置有一定的認識。
5 大核心概念
entry（入口）
指示 Webpack 從哪個文件開始打包
output（輸出）
指示 Webpack 打包完的文件輸出到哪里去，如何命名等
loader（加載器）
webpack 本身只能處理 js、json 等資源，其他資源需要借助 loader，Webpack 才能解析
plugins（插件）
擴展 Webpack 的功能
mode（模式）
主要由兩種模式：
- 開發模式：
development - 生產模式：
production
準備 Webpack 配置文件
在項目根目錄下新建文件：webpack.config.js
module.exports = {// 入口entry: "",// 輸出output: {},// 加載器module: {rules: [],},// 插件plugins: [],// 模式mode: "",
};
Webpack 是基于 Node.js 運行的，所以采用 Common.js 模塊化規范
修改配置文件
- 配置文件
// 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", // 開發模式
};
- 運行指令
npx webpack
此時功能和之前一樣，也不能處理樣式資源
小結
Webpack 將來都通過 webpack.config.js 文件進行配置，來增強 Webpack 的功能
)
