想要知道Webpack在前端项目中，发挥什么作用，那就得知道它是由哪几部分组成的

一：什么是Webpack？

Webpack是一个前端的，针对于模块的打包工具。可以把项目中的资源文件，按照既定的方式，当作对应的模块，打包成可以在浏览器端运行的资源文件。

二：Webpack的五大核心

1. 打包入口文件

javascript 复制代码

entry: "./src/index.js"

2. 打包出入口文件

javascript 复制代码

output: {
    path: path.resolve(__dirname, "./dist"),    // 打包后的文件路径
    filename: "bundle.js"    // 打包后的文件名
}

3. Loader（加载器）

Webpack 只认识JS，Loader可以将其他的资源转换成JS可处理的文件。

下列是常见的loader处理器：

样式处理：css-loader、style-loader、sass-loader、less-loader、postcss-loader；

资源处理：file-loader、url-loader、raw-loader；

代码处理：babel-loader、ts-loader、eslint-loader；

框架处理：vue-loader、react-hot-loader；

性能优化处理：thread-loader、cache-loader；

其他处理：csv-loader、xml-loader、markdown-loader等。

自定义loader。

4. Plugin(插件)

增强构建能力，做 Loader 做不了的事。

压缩代码

清理目录

生成HTML

自定义Plugin

5. Mode（打包模式）

development：开发模式，不压缩，方便调试。

production：生产模式，自动压缩、优化代码、Tree-Shaking。

三：Webpack执行流程

读取配置文件webpack.config.js；
从entry开始解析；
遇到不同的文件，使用不同的Loader编译；
使用Plugin处理构建流程；
最终输出到output目录。

四：Loader和Plugin的区别？

|----------|--------------------------------------------|------------------------------|
| | Loader | Plugin |
| 作用 | 文件加载器，将非JS文件（CSS、图片、文件等）转换为Webpack可以处理的模块。 | 扩展Webpack构建功能，在打包流程中起到关键性作用。 |
| 执行时机 | 单个文件的处理阶段 | 贯穿整个Webpack生命周期（从打包开始到结束） |
| 配置位置 | module.rules数组中 | plugins数组中 |
| 配置方式 | 可以使用 **,**串联多个Loader | 通过new实例化插件对象 |
| 本质 | 转换器 | 扩展器 |
| 处理范围 | 针对指定的类型文件（.css、.png等） | 不针对指定的文件，可以影响整个打包流程 |
| 执行顺序 | 从右往左，从下到上 | 按数组顺序依次执行 |

文末总结：Webpack仍是前端最重要的打包工具之一，通过Entry、Output、Loader、Plugin、Mode核心模块化完成对项目的编译、资源处理、打包优化。

Webpack在前端项目中究竟发挥什么作用？