webpack

用于前端工程化，一个前端打包工具

对前端项目资源进行构建配置

• 主要功能：编译 JS 文件，压缩打包项目
• 其它功能：统一资源配置，前端工程化

处理 html 、开发服务器&自动化等等前端工程化场景和问题

配置文件5大核心概念

1. entry

   指示 Webpack 从哪个文件开始打包

2. output

   指示 Webpack 打包完文件输出到哪里去，如何命名

3. loader

   Webpack 本身只能处理 js、json 等资源，其它资源需要借助 loader，Webpack 才能够解析

4. plugins

   扩展 Webpack 的功能

5. mode

   主要有两种模式

   开发模式 ：development

   生产模式：production

开发模式介绍

• 编译代码：使浏览器能够识别运行

开发时，我们有样式资源、字体资源、图片资源、html资源等，webpack都不能处理这些资源，所以我们需要使用加载配置来编译这些资源

• 代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健硕

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观

loader和插件

loader可以使你在 import 或 load 模块时预处理文件

用于前端工程化，处理一些除 JS 文件外的一些资源. 如：处理 CSS资源、图片资源、字体图标资源、其它资源等等..

处理css资源

使用ESlint插件