webpack Shimming

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

使用 ProvidePlugin 插件

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

// www.javascriptcn.com code example
// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      _: 'lodash'
    })
  ]
};

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

使用 imports-loader 和 exports-loader

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

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('some-module'),
        use: 'imports-loader?this=>window'
      },
      {
        test: require.resolve('another-module'),
        use: 'exports-loader?foo'
      }
    ]
  }
};

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

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

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