如何添加一个查询到多个 WebPACK 打包模块？-JavaScript中文网-JavaScript教程资源分享门户

背景

在前端项目开发中，我们通常会使用 WebPACK 进行打包，将多个 JS、CSS 文件打包成一个或多个文件。有时我们需要在多个打包模块中添加一些公共的查询代码，但是不想重复地在每个模块中添加。本文将介绍如何通过 WebPACK 提供的插件机制来实现这一目标。

方案

我们可以使用 WebPACK 的 ProvidePlugin 插件来实现将某个变量或模块引入到所有的打包模块中。下面是具体步骤：

安装 ProvidePlugin 插件

npm install --save-dev webpack webpack-cli webpack-dev-server

在 WebPACK 配置文件中添加 ProvidePlugin 插件

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

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

上面的配置表示在所有的打包模块中自动引入 jQuery 模块，并将其暴露到全局变量 $ 和 jQuery 中。

在打包模块中使用引入的变量或模块

$(document).ready(function() {
  console.log('Hello, jQuery!');
});

示例代码

下面是一个完整的 WebPACK 配置文件示例：

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

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

在打包模块中，我们可以直接使用 $ 和 jQuery 变量：

$(document).ready(function() {
  console.log('Hello, jQuery!');
});

结论

通过使用 WebPACK 的 ProvidePlugin 插件，我们可以方便地将某个变量或模块引入到所有的打包模块中。这种方式避免了在每个打包模块中重复添加相同代码的问题，使代码更加简洁易懂。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/14864