webpack

是什么

webpack是打包工具，可以将多个模块打包成一个或多个包，以便在浏览器中使用

作用

主要作用是管理模块依赖关系，优化文件体积和加载速度，提供各种优化和拓展功能

工作原理

• 【加载】解析配置文件，加载需要打包的模块和插件
• 【解析】从入口文件开始，根据模块间的依赖关系，递归解析所有需要打包的模块
• 【处理】根据配置文件中的规则，对模块进行Loader处理和代码分离
• 【打包】将处理后的模块打包成一个或多个包（bundle）
• 【优化】对打包后的包进行优化，如压缩，缓存
• 【输出】输出打包结果，供浏览器使用

什么是Loader，怎么配置Loader

用于处理各种类型的文件，将其转换成模块，并放到打包结果中。
常见的有babel-loader、css-loader、sass-loader等
配置loader是在webpack.config.js中添加一个module.rules数组，每个对象表示一条规则，包含test、use、exclude属性 eg：

module.exports = {
 // ...
 module: {
   rules: [
     {
       test: /\.css$/,
       use: ["style-loader", "css-loader"],
     },
   ],
 },
};

什么是Plugin，怎么编写Plugin

Plugin是webpack的一个拓展机制，用于拓展和优化webpack的功能。
常见的有：HtmlWebpackPlugin（生成html文件）、CleanWebpackPlugin（清除目录文件夹）等

// 使用方式
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CleanWebpackPlugin(),
    // ...其他插件
  ]
};

编写Plugin是创建一个js类，并实现apply方法，apply方法里接收一个compiler（编译器）对象，用于注册各种钩子函数

class MyPlugin {
  apply(compiler) {
  compiler.hooks.emit.tap("MyPlugin", (compilation) => {
    console.log("Webpack is emitting files...");
});

如何使用 Webpack 实现代码分离和按需加载？

代码分离和按需加载能有效减少，打包结果的体积和加载时间

代码分离：可以将一个大包拆分成多个小包

• 使用entry配置多个入口文件，然后每个入口文件生成一个包
• 使用optimization.spliteChunks配置公共代码的抽取规则，将公共代码抽取到一个单独的包里

按需加载：可以根据需要动态加载模块，避免一次性加载所有代码

• 使用import、require.ensure()

Webpack 的缓存机制是什么？如何使用缓存？

缓存机制：根据文件内容的hash值，生成一个唯一的缓存标识，如果模块内容没有改变，就是用缓存中的打包结果
使用缓存：webpack.config.js中设置cache: true

Tree Shaking是什么，怎么使用

用于去除未使用的代码，减少打包体积，原理是通过静态分析代码中的依赖关系，只保留被使用部分
使用：在webpack.config.js中配置optimization.usedExports和optimization.sideEffects

module.exports = {
  // ...
  optimization: {
    usedExports: true,
    sideEffects: false,
  },
};