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

在开始使用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",
};

四、开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事：
1、编译代码，使浏览器能识别和运行。
开发时我们有样式资源、字体图片、图片资源、多媒体资源、HTML资源等，webpack默认都不能处理这些，我们需要加载配置来编译这些资源

2、代码质量检测，树立代码规范
提前检查代码的一些可以消除一定隐患与Bug、代码运行起来更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅与美观。