Webpack 的核心概念是什么？请解释 Entry、Output、Loader、Plugin 的作用。

推荐答案

Webpack 的核心概念包括 Entry、Output、Loader 和 Plugin。它们各自的作用如下：

• Entry：指定 Webpack 打包的入口文件，Webpack 会从该文件开始构建依赖图。
• Output：指定 Webpack 打包后的文件输出路径和文件名。
• Loader：用于处理非 JavaScript 文件（如 CSS、图片等），将其转换为 Webpack 能够处理的模块。
• Plugin：用于执行更广泛的任务，如打包优化、资源管理、环境变量注入等。

本题详细解读

Entry

Entry 是 Webpack 构建依赖图的起点。Webpack 会从 Entry 指定的文件开始，递归地解析出所有依赖的模块。Entry 可以是一个字符串（单入口）或一个对象（多入口）。

module.exports = {
  entry: './src/index.js', // 单入口
  // 或者
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  } // 多入口
};

Output

Output 配置决定了 Webpack 打包后的文件输出位置和文件名。通常，Output 会指定一个 path 和一个 filename。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

Loader

Loader 用于处理非 JavaScript 文件。Webpack 本身只能处理 JavaScript 文件，但通过 Loader，Webpack 可以处理其他类型的文件，如 CSS、图片、字体等。Loader 通常配置在 module.rules 中。

-- -------------------- ---- -------
-------------- - -
  ------- -
    ------ -
      -
        ----- ---------
        ---- ---------------- -------------
      -
    -
  -
--

Plugin

Plugin 用于执行更广泛的任务，如打包优化、资源管理、环境变量注入等。Plugin 可以在 Webpack 的构建过程中插入自定义的逻辑。常见的 Plugin 有 HtmlWebpackPlugin、CleanWebpackPlugin 等。

-- -------------------- ---- -------
----- ----------------- - -------------------------------

-------------- - -
  -------- -
    --- -------------------
      --------- ------------------
    --
  -
--