面试题（webpack）什么是webpack打包工具，有什么作用？ webpack 有哪些模块 webpack 中 pl

什么是webpack打包工具，有什么作用？

webpack 有哪些模块

webpack 中 plugin 和 loader 的区别？

常用的一些loader?

style-loader css-loader
内置 file-loader url-loader assets 处理图片 |||| assets/resource 处理字体图标及其他资源如 .map3, .mp4, .avi等
babel-loader 配合 @babel/core @babel/preset-env 转换es6为兼容性js
postcss-loader 配合 postcss postcss-preset-env 做css兼容性处理

常用的一些 plugin?

eslint-webpack-plugin 仅检查src 中的js格式
html-webpack-plugin 自动创建html文件，并注入资源
mini-css-extract-plugin 提取css成单独文件由link引入内含loader 替换style-loader
css-minimizer-webpack-plugin css压缩

webpack mode 是什么？

webpack5的高级特性如何使用？

提升开发体验
- 开发模式: devtool: "cheap-module-source-map" 打包编译速度快，只包含行映射没有列映射
- 生产模式: devtool: "source-map" 包含行/列映射打包编译速度更慢
- devServer: 开启hot为true / vue-loader / react-hot-loader

提升打包构建速度

OneOf: 仅匹配一个loader,剩下就不进行匹配

 rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
         ]
     }
 ]

Include/ Exclude: 设置 babel 和 eslint 检查的范围缩小在 src 内部

 {
    test: /.js$/,
    // exclude: /node_modules/, // 排除node_modules代码不编译
    include: path.resolve(__dirname, "../src"), // 也可以用包含
    loader: "babel-loader",
  },

Cache: 缓存Eslint 检查和 Babel 编译,可以使打包更快

{
    test: /.js$/,
    // exclude: /node_modules/, // 排除node_modules代码不编译
    include: path.resolve(__dirname, "../src"), // 也可以用包含
    loader: "babel-loader",
    options: {
      cacheDirectory: true, // 开启babel编译缓存
      cacheCompression: false, // 缓存文件不要压缩
    },
},

Thead: thread-loader 项目体积大时,开启多进程做一件事

eslint检查
js压缩 terser-webpack-plugin w5默认支持,为设置多进程,可以进行下载

const os = require("os");
const threads = os.cpus().length;

{
    test: /.js$/,
    // exclude: /node_modules/, // 排除node_modules代码不编译
    include: path.resolve(__dirname, "../src"), // 也可以用包含
    use: [
      {
        loader: "thread-loader", // 开启多进程
        options: {
          workers: threads, // 数量
        },
      }
    ],
  },

减少代码体积
- Tree Shaking: 移除js中没有使用上的代码默认开启不用配置
- Babel: @babel/plugin-transform-runtime 减少辅助代码配置babel-loader 的 @babel/plugin-transform-runtime
- Image Minimizer: 压缩图片体积 image-minimizer-webpack-plugin imagemin 无损压缩:imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo
- externals：将大型且不常更新的第三方库，排除在构建产物外，可以显著减少 bundle 大小，提升页面加载速度，将这些库通过 CDN 引入
- 开启 gzip 压缩，且配置 ngix gzip 压缩项

优化代码运行性能

Code Split: 可以做单入口 + 代码分割 + 动态导入

cacheGroups 组，哪些模块要打包到一个组，将首页加载文件不需要展示的项，打包到其他文件

 optimization: {
    // 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割,包含同步，异步，如不具体配置按下面默认值处理
      // 以下是默认值
      // minSize: 20000, // 分割代码最小的大小
      // minRemainingSize: 0, // 类似于minSize，最后确保提取的文件大小不能为0
      // minChunks: 1, // 至少被引用的次数，满足条件才会代码分割
      // maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
      // maxInitialRequests: 30, // 入口js文件最大并行请求数量
      // enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests）
      // cacheGroups: { // 组，哪些模块要打包到一个组
      //   defaultVendors: { // 组名
      //     test: /[\/]node_modules[\/]/, // 需要打包到一起的模块
      //     priority: -10, // 权重（越大越高）
      //     reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
      //   },
      //   default: { // 其他没有写的配置会使用上面的默认值
      //     minChunks: 2, 
      //     priority: -20,
      //     reuseExistingChunk: true,
      //   },
      // },
  },
  // 来自 `node_modules`的模块优先被分配到defaultVendors组，并打包成单独的 `vendor`文件
  // 其他未匹配到的模块（通常是业务代码）且（minChunks: 2）被引用两次，其次被分配到default组，打包成公共文件

Preload / Prefetch: 浏览器空闲加载资源 @/vue/preload-webpack-plugin
Network Cache:
- 文件名: hash 保存实现旧文件缓存,新文件更新 runtime 选取hash值命中单独为一个文件
  - 处理位置出口 css plugin 位置
- 开启 runtimeChunk 配置项
```
// 提取runtime文件
runtimeChunk: {
  name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
},
```
Core-js: 处理 es6及以上js的 polyfill
- @babel/eslint-parser esliint解析
- core-js babel.config.js
PWA:
- 离线可使用,通过service workers实现
- workbox-webpack-plugin