07-Shimming

Shimming

webpack在打包时能够遵循模块化规范编写的模块语法，然而一些第三方库可能会引用全局依赖，比如jQuery插件需要依赖全局变量$，这些非模块化的第三方库无法直接在webpack中使用，这时候就用到是Shimming（垫片）的概念，预置一些依赖

预置全局变量

const webpack = require('webpack');	//引入webpack，使用webpack中自带的插件ProvidePlugin
module.exports = {
  entry: './index.js',
  plugins: [new webpack.ProvidePlugin({	//在插件数组中实例化该插件提供的对象
      $: 'jquery',	//若模块中使用到$变量，则会在该模块中自动引入jquery模块并赋值给$
    })],
};

预置this指向

使用npm install imports-loader -D安装imports-loader，并编写以下规则（输出和模式采用默认了），之后在模块中使用this时thsi就会指向window

module.exports = {
  entry: "./index.js",	//入口文件路径
  module: {
    rules: [{
      test: /\.js$/,	//使用正则匹配到以js结尾的文件
      use: "imports-loader?wrapper=window",	//使用"imports-loader对js文件进行预处理，低版本的查询字符串是this=window
    }]
  }
}