webpack-loader与全局变量引入
- expose-loader // 把模块内导入的变量暴露到window
- webpack.providePlugin() //把变量插入每个模块中
- externals // 使变量在被模块中引用时替换成x变量 并不打包
- inline-lodader // 行内loader
- normal-loader // 普通loader
- post-loader // 后置loader
- 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 解析规则为从下至上,从右到左