从配置到优化：全面掌握Webpack工程化

1. Webpack配置有哪些？

Webpack的配置主要包括以下几个部分：

• entry：指定Webpack打包的入口文件。

• output：设置打包后输出的目录和文件名称。

• module：配置不同的loaders来处理不同的模块。

• resolve：设置Webpack如何解析模块依赖。

• plugins：使用插件增强Webpack功能。

• devServer：提供简单的web服务器和实时重载功能。

• optimization：配置代码拆分和运行时代码提取等优化策略。

• externals：配置排除打包的模块。

• devtool：配置source-map类型。

• context：Webpack使用的根目录。

• target：指定Webpack编译的目标环境。

• performance：输出文件的性能检查配置。

• noParse：不用解析和处理的模块。

• stats：控制台输出日志控制。

2. 常见的Loader和Plugin

• Loader：

  • babel-loader：将ES6+代码转换成ES5。

  • css-loader：解析CSS文件。

  • style-loader：将CSS代码注入到HTML文档中。

  • file-loader：解析文件路径。

  • url-loader：将小于指定大小的文件转成base64编码。

  • sass-loader：将Sass文件编译成CSS。

  • less-loader：将Less文件编译成CSS。

  • postcss-loader：自动添加CSS前缀。

  • vue-loader：将Vue单文件组件编译成JavaScript代码。

• Plugin：

  • HtmlWebpackPlugin：生成HTML文件并自动引入打包后的资源。

  • CleanWebpackPlugin：清除输出目录。

  • ExtractTextWebpackPlugin：将CSS代码提取到单独的文件中。

  • DefinePlugin：定义全局变量。

  • UglifyJsWebpackPlugin：压缩JavaScript代码。

  • HotModuleReplacementPlugin：实现热更新。

  • MiniCssExtractPlugin：提取CSS到单独文件。

  • BundleAnalyzerPlugin：分析打包后的文件大小和依赖关系。

3. Loader和Plugin的区别

• 功能不同：

  • Loader是转换器，用于处理非JavaScript文件。

  • Plugin是插件，用于增强Webpack功能。

• 用法不同：

  • Loader在module.rules中配置。

  • Plugin在plugins中配置。

4. Webpack的构建流程

• 初始化参数。

• 开始编译，初始化Compiler对象。

• 确定入口，解析文件构建AST语法树。

• 编译模块，递归调用Loader处理文件。

• 完成模块编译，得到模块内容和依赖关系。

• 输出资源，组装成Chunk并生成文件。

• 输出完成，写入文件系统。

5. Webpack的热更新（HMR）原理

HMR通过WebSocket实现浏览器与Webpack-dev-server的通信，当资源变化时，Webpack将新模块代码放入内存，并推送给浏览器进行更新。

6. Code Splitting

Code Splitting是一种优化技术，将大Chunk拆分为多个小Chunk，实现按需加载，减少初始加载时间。

7. Webpack的Source Map

Source Map建立构建后代码与源代码的映射关系，用于调试。通过devtool: 'source-map'配置生成。

8. Webpack的Tree Shaking原理

• Tree Shaking利用ES6模块的静态结构特性，去除未使用的代码。需在Webpack配置中启用usedExports和concatenateModules。

9. 提高Webpack打包速度

• 利用缓存。

• 使用多进程/多线程构建。

• 使用DllPlugin和HardSourceWebpackPlugin。

• 配置Tree Shaking。

• 移除不必要的插件。

10. 减少打包后的代码体积

• 代码分割（Code Splitting）。

• Tree Shaking。

• 压缩代码。

• 使用生产模式。

• 使用CDN加速。

11. Vite比Webpack快的原因

• 开发模式差异：Vite按需编译，Webpack先打包再启动。

• 对ES Modules的支持：Vite直接利用浏览器原生ES Modules。

• 底层语言差异：Vite基于Go语言的esbuild，速度更快。

• 热更新处理：Vite只需重新请求变化的模块。