你对webpack的了解怎么样，不来看看？

起源

面试官："你对 webpack 的了解怎么样，简单地说说。"

没错，这是我最近面试中遇到过的频率较高的一道面试题。从七月到九月疯狂投递简历，但是收到的面试却不是很多，所以我会珍惜每次面试机会，记录好每次的面试题目，以便回顾哪些地方答得不好，哪些地方需要改进，后续我会将我在面试中出现频率高的面试题单独拎出来和大家讲一讲。

对于这个关于 webpack 的题目，请原谅我是一名刚毕业的学生，对 webpack 的了解并不多，可能只知道它可以打包。虽然有过一小段实习机会，但是接触到 webpack 的机会少之又少。

于是乎，我便利用投简历和面试的空隙时间，来学习了解一下 webpack，每天给自己的今日计划中，webpack 必不可少。

webpack的作用和打包流程

这里我们来讲一下它的作用和打包的流程。

作用

我首先看了官方的解释，但是我觉得官方的解释太官方了，我觉得可以将它通俗化一点。webpack 是一个打包工具，它可以将项目进行模块化打包，在进行打包过程的时候会触发 Loader 和 Plugin（后面会介绍），使得打包后的项目质量更高、速度更快等。

如果要细分作用的话，webpack 还能解决在开发阶段的跨域问题、压缩代码文件等等。

打包流程

关于打包流程我也用相对通俗易懂的话说一遍吧。

webpack 中最核心的就是入口和出口，需要配置好 Loader 加载器和 Plugin 插件。我们可以把 webpack 看做是一个模块打包机，它做的事情是分析项目结构，找到 js 模块以及其他的一些浏览器不能直接运行的语言，比如 TS，SCSS 等，通过 Loader 加载器可以将其转换为合适的格式供浏览器使用。最后就转换成相应文件输出到文件系统中即可。

lua 复制代码

  output: {
    // bundle生成位置
    path: path.resolve(__dirname, "dist"),
    // bundle文件名
    filename: "main.js",
    clean: true,
  },

由于 webpack 只能识别 js 和 json 文件，因此需要 Laoder 加载器来转换其他类型的模块。

webpack的Loader和Plugin

这里我们来讲一下它里面的 Loader 加载器和 Plugin 插件。

Loader

Loader 被称作加载器，主要主要是翻译浏览器不能直接运行的语言，比如 TS、SCSS。当碰到识别不了的模块时，就会通过 Loader 来进行解析。

下面举个简单的小例子。

perl 复制代码

rules: [
      {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: [
              ["@babel/plugin-transform-runtime"],
            ],
          },
        },
      },
    ],

这里用到了 css-loader ，less-loader 和 babel-loader。

css-loader 可以将 CSS 文件通过 require 的方式引入，并返回 CSS 代码；less-loader 顾名思义，就是用来处理 Less，与之相同的还有 sass-loader 等；babel-loader 就是用 babel 来转换文件的。

Plugin

Plugin 被称作插件，负责 webpack 扩展功能，来解决 Loader 无法实现的其他事情，像打包优化、资源管理等都是通过 Plugin 来实现的。

下面举个简单的小例子。

arduino 复制代码

  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
      inject: "body",
    }),
    new MiniCssExtractPlugin({
      filename: "./styles/[contenthash].css",
    }),
    new CssMinimizerWebpackPlugin(),
  ],

这里应用到了 HtmlWebpackPlugin ，MiniCssExtractPlugin 和CssMinimizerWebpackPlugin。

HtmlWebpackPlugin 用来创建 HTML 文件；MiniCssExtractPlugin 可以将 CSS 代码从 JavaScript 中分离出来，生成单独的 CSS 文件；CssMinimizerWebpackPlugin 这个是关于 CSS 优化的插件，就不过多介绍了。

总结

以上就是关于我对 webpack 的初理解了，对于 webpack 的学习并没有结束，这只是一个开始。

就我目前而言，我使用过 webpack 创建项目，也使用过它里面的插件进行代码优化，不过对于 webpack 的用法还仅仅是浮于表面。

如果有我理解不好的地方或者大伙有更好的理解方式欢迎各位在评论区里指出，另外各位也可以在评论区里讨论一些关于 webpack 的疑难问题~