webpack考点

一、什么时候用Loader，什么时候用Plugin

loader即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。plugin即为插件，是一个扩展器，丰富webpack本身，增强功能 ，针对的是在loader结束之后，webpack打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。

二、优化方法

Webpack有许多优化方案可以提高构建性能和优化输出结果。以下是一些常见的Webpack优化方案：

1. 使用最新版本的Webpack：确保使用最新版本的Webpack，因为每个版本都会带来性能改进和bug修复。

2. 配置合适的mode：Webpack 4及以上版本引入了mode选项，可以设置为"production"或"development"。在生产模式下，Webpack会自动应用一些优化，如代码压缩和作用域提升。

3. 减少文件的体积：通过压缩代码、移除未使用的代码、使用Tree Shaking等技术，减少输出文件的体积。

4. 使用Code Splitting：通过Code Splitting将代码拆分为多个小块，使得只加载当前页面所需的代码，而不是一次性加载全部代码。可以使用Webpack的SplitChunks插件来实现。

5. 使用懒加载：将一些不常用的代码或组件延迟加载，当需要时再动态加载。可以使用Webpack的动态import语法或React.lazy()来实现。

6. 缓存和持久化：使用Webpack的缓存机制，将构建结果缓存起来，以便下次构建时可以复用之前的结果。可以使用Webpack的cache-loader或hard-source-webpack-plugin来实现。

7. 多线程/多进程构建：使用Webpack的多线程或多进程构建，可以利用多核处理器来加速构建过程。可以使用Webpack的thread-loader或parallel-webpack插件来实现。

8. 优化Loader配置：合理配置Loader，避免不必要的文件解析和转换，尽量减少Loader的使用数量。

9. 优化Resolve配置：合理配置Resolve选项，减少Webpack的模块解析时间。可以通过配置extensions、alias、modules等选项来优化。

10. 使用Webpack插件：使用一些优化插件，如UglifyJsPlugin、OptimizeCSSAssetsPlugin、MiniCssExtractPlugin等，来优化代码压缩、CSS提取等。

以上是一些常见的Webpack优化方案，具体的优化策略还需要根据项目的具体情况进行调整和优化。