webpack shimming(垫片功能)

1、shimming 的作用

通过 webpack.config.js 文件的配置，提供全局变量，达到业务代码可以在不同环境中使用到全局变量

2、使用方法

• a、在 webpack.config.js 的 plugins 中配置

plugins: [
  /**
   * webpack shimming(垫片)功能
   * 将某些第三方依赖设置成项目的全局变量
   * 方便业务代码在不同环境中对该依赖的使用
   */
  new webpack.ProvidePlugin({
    /**
     * 发现业务模块里面使用了 $ 这个符号，就会自动引入 jquery 这个模块
     * 相当于 import $ from 'jquery'
     * lodash 同理
     */
    '$': 'jquery',
    '_': 'lodash',
    // _join 代表 lodash 的 join 方法
    '_join': ['lodash', 'join']
  })
]

// ---------------- 业务代码中使用 ---------------

/**
 * 由于配置了 webpack.ProvidePlugin
 * 因此 $、_ 会被自动引入
 * 无需使用 import 的方式引入 $、_
 */

$('body').append(`<div>${_.join(['tang', 'li', 'he'], '_')}</div>`)
$('body').append(`<div>${_join(['tang', 'li', 'he'], '_')}</div>`)

• b、使用 imports-loader 引入模块作为全局变量使用

// 在 module 中配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          },
          /**
           * js 会先走 imports-loader
           * 将业务模块里面的 this 指向 window
           */
          {
            loader: "imports-loader",
            options: {
              imports: {
                moduleName: 'jquery',
                name: '$',
              }
            }
          }
        ]
      }
    ]
  }
}

// ---------------- 业务代码中使用 ---------------

/**
 * 在 imports-loader 中设置了 $ 为 jquery
 * 无需使用 import 的方式引入 $、_
 */
$('body').append(`<div>hahah</div>`)