想要知道Webpack在前端项目中发挥什么作用那就得知道它是由哪几部分组成的一什么是WebpackWebpack是一个前端的针对于模块的打包工具。可以把项目中的资源文件按照既定的方式当作对应的模块打包成可以在浏览器端运行的资源文件。二Webpack的五大核心1. 打包入口文件entry: ./src/index.js2. 打包出入口文件output: { path: path.resolve(__dirname, ./dist), // 打包后的文件路径 filename: bundle.js // 打包后的文件名 }3. Loader加载器# Webpack 只认识JSLoader可以将其他的资源转换成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自定义Plugin5. Mode打包模式# development开发模式不压缩方便调试。# production生产模式自动压缩、优化代码、Tree-Shaking。三Webpack执行流程1. 读取配置文件webpack.config.js2. 从entry开始解析3. 遇到不同的文件使用不同的Loader编译4. 使用Plugin处理构建流程5. 最终输出到output目录。四Loader和Plugin的区别LoaderPlugin作用文件加载器将非JS文件CSS、图片、文件等转换为Webpack可以处理的模块。扩展Webpack构建功能在打包流程中起到关键性作用。执行时机单个文件的处理阶段贯穿整个Webpack生命周期从打包开始到结束配置位置module.rules数组中plugins数组中配置方式可以使用,串联多个Loader通过new实例化插件对象本质转换器扩展器处理范围针对指定的类型文件.css、.png等不针对指定的文件可以影响整个打包流程执行顺序从右往左从下到上按数组顺序依次执行文末总结Webpack仍是前端最重要的打包工具之一通过Entry、Output、Loader、Plugin、Mode核心模块化完成对项目的编译、资源处理、打包优化。