Webpack 中文文档 目录

webpack Shimming

Webpack Shimming

在 Webpack 中,Shimming 是指在打包过程中对模块进行修改或替换的技术。通过 Shimming,我们可以在不改动源代码的情况下,对模块进行一些特定的操作,比如注入全局变量、修改模块的导出等。

使用 ProvidePlugin 插件

Webpack 提供了一个插件叫做 ProvidePlugin,可以用来在模块中自动引入特定的模块或变量,并且将其绑定到全局变量上。这样我们就可以在模块中直接使用这些全局变量,而不需要显式地引入它们。

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

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

在上面的例子中,我们使用了 ProvidePlugin 插件,将 jQuery 和 lodash 模块绑定到全局变量 $ 和 _ 上。这样在我们的代码中就可以直接使用 $ 和 _,而不需要手动引入这两个模块。

使用 imports-loader 和 exports-loader

除了 ProvidePlugin 插件之外,Webpack 还提供了 imports-loader 和 exports-loader 这两个 loader,用来在模块的导入和导出上进行一些操作。

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

在上面的例子中,我们使用了 imports-loader 和 exports-loader,分别对 some-module 和 another-module 进行了操作。imports-loader 用来将模块中的 this 绑定到全局对象 window 上,而 exports-loader 则用来将模块的导出改为 foo。

通过这种方式,我们可以在打包过程中对模块进行一些定制化的操作,从而达到我们想要的效果。

这就是 Webpack 中 Shimming 的基本用法,通过对模块的操作,我们可以实现一些非常灵活的功能。


上一篇:webpack 创建库 (Library)
下一篇:webpack 渐进式网络应用程序