webpack-loader与全局变量引入

webpack-loader与全局变量引入

1. expose-loader // 把模块内导入的变量暴露到window
2. webpack.providePlugin() //把变量插入每个模块中
3. externals // 使变量在被模块中引用时替换成x变量 并不打包
4. inline-lodader // 行内loader
5. normal-loader // 普通loader
6. post-loader // 后置loader
7. pre-loader // 前置loader

expose-loader

module: {
  rules: [{
          test: require.resolve('jquery'),
          use: [{
              loader: 'expose-loader',
              options: '$'
          }]
      }]
}

webpack.providePlugin

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})
然后我们可以在代码中直接使用，
// in a module
$('#item');
jQuery('#item'); 

externals

如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用。

externals:{
  react:'React',
  jquery:'jQuery'
}

normal-loader

普通loader 解析规则为从下至上，从右到左