是什么

webpack是打包工具，可以將多個(gè)模塊打包成一個(gè)或多個(gè)包，以便在瀏覽器中使用

作用

主要作用是管理模塊依賴關(guān)系，優(yōu)化文件體積和加載速度，提供各種優(yōu)化和拓展功能

工作原理

• 【加載】解析配置文件，加載需要打包的模塊和插件
• 【解析】從入口文件開始，根據(jù)模塊間的依賴關(guān)系，遞歸解析所有需要打包的模塊
• 【處理】根據(jù)配置文件中的規(guī)則，對模塊進(jìn)行Loader處理和代碼分離
• 【打包】將處理后的模塊打包成一個(gè)或多個(gè)包（bundle）
• 【優(yōu)化】對打包后的包進(jìn)行優(yōu)化，如壓縮，緩存
• 【輸出】輸出打包結(jié)果，供瀏覽器使用

什么是Loader，怎么配置Loader

用于處理各種類型的文件，將其轉(zhuǎn)換成模塊，并放到打包結(jié)果中。
常見的有babel-loader、css-loader、sass-loader等
配置loader是在webpack.config.js中添加一個(gè)module.rules數(shù)組，每個(gè)對象表示一條規(guī)則，包含test、use、exclude屬性 eg：

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

什么是Plugin，怎么編寫Plugin

Plugin是webpack的一個(gè)拓展機(jī)制，用于拓展和優(yōu)化webpack的功能。
常見的有：HtmlWebpackPlugin（生成html文件）、CleanWebpackPlugin（清除目錄文件夾）等

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

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

編寫Plugin是創(chuàng)建一個(gè)js類，并實(shí)現(xiàn)apply方法，apply方法里接收一個(gè)compiler（編譯器）對象，用于注冊各種鉤子函數(shù)

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

如何使用 Webpack 實(shí)現(xiàn)代碼分離和按需加載？

代碼分離和按需加載能有效減少，打包結(jié)果的體積和加載時(shí)間

代碼分離：可以將一個(gè)大包拆分成多個(gè)小包

• 使用entry配置多個(gè)入口文件，然后每個(gè)入口文件生成一個(gè)包
• 使用optimization.spliteChunks配置公共代碼的抽取規(guī)則，將公共代碼抽取到一個(gè)單獨(dú)的包里

按需加載：可以根據(jù)需要動態(tài)加載模塊，避免一次性加載所有代碼

• 使用import、require.ensure()

Webpack 的緩存機(jī)制是什么？如何使用緩存？

緩存機(jī)制：根據(jù)文件內(nèi)容的hash值，生成一個(gè)唯一的緩存標(biāo)識，如果模塊內(nèi)容沒有改變，就是用緩存中的打包結(jié)果
使用緩存：webpack.config.js中設(shè)置cache: true

Tree Shaking是什么，怎么使用

用于去除未使用的代碼，減少打包體積，原理是通過靜態(tài)分析代碼中的依賴關(guān)系，只保留被使用部分
使用：在webpack.config.js中配置optimization.usedExports和optimization.sideEffects

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