【快速搞定Webpack5】基本配置及开发模式介绍（二）

news2024/10/6 8:38:40

在开始使用webpack之前么，我们需要对Webpack的配置有一定的认识。
在这里插入图片描述

一、5大核心概念

1. enty（入口）
指示webpack从哪个文件开始打包

2. output（输出）
指示webpack打包完的文件输出到哪里去，如何命名等

3. loader（加载器）
webpack本身只能处理js、json等资源，其他资源需要借助loader、webpack才能解析

4. plugins（插件）
扩展webpack的功能

5. mode（模式）
主要有两种模式：
● 开发模式：development
● 生产模式：production

二、准备 Webpack 配置文件

在项目根目录下创建文件：webpack.config.js

module.exports = {
    // 入口
    entry: "",  
    // 输出
    output: {},
    // 加载器
    module: {
        rules: [],
    },
    // 插件
    plugins: [],
    // 模式
    mode: "",
};

Webpack 是基于Node.js运行的，所以采用Common.js模块化规范

三、修改配置文件

const path = require("path");

module.exports = {
    // 入口
    entry: "./src/main.js",  // 需要用相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"),   // 需要用绝对路径 需要用的Nodejs的核心模块 path，专门处理路径问题
        // 文件名
        filename: "main.js",
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
        ],
    },
    // 插件
    plugins: [
        // plugin的配置
    ],
    // 模式
    mode: "development",
};