是什么
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,
},
};
