本文主要是介绍【快速搞定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、代码运行起来更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅与美观。
这篇关于【快速搞定Webpack5】基本配置及开发模式介绍（二）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
