企业官网建设流程全解析

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

一：什么是Webpack？

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

二：Webpack的五大核心

1. 打包入口文件

entry: "./src/index.js"

2. 打包出入口文件

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执行流程

1. 读取配置文件webpack.config.js；

2. 从entry开始解析；

3. 遇到不同的文件，使用不同的Loader编译；

4. 使用Plugin处理构建流程；

5. 最终输出到output目录。

四：Loader和Plugin的区别？

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