当 webpack 加载到某个 js 模块里,出现了未定义且名称符合(字符串完全匹配)配置中 key 的变量时,会自动 require 配置中 value 所指定的 js 模块。
下面这样设置就再也不用在每个模块中 require('jquery')
了,适合于兼容通过 npm
引入的 jQuery 插件:
var providePlugin = new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
});
install: npm install --save-dev expose-loader
这样设置就是把全局里的 $
都当做 jQuery
了,适合于兼容通过 <script>
引入的 jQuery 插件:
{
test: require.resolve('jquery'), // 此loader配置项的目标是NPM中的jquery
loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`,再通过管道进一步又声明成为全局变量`$`
}
可以在控制台使用 $
获得 jQuery
了
用来将某个全局变量伪装成某个 js 模块的 export:
externals: {
'jquery': 'window.jQuery'
},
老项目中, jQuery 是通过 <script>
引入的,那么当某个模块 require('jquery')
的时候,就会把 window.jQuery
返回给它。
externals
vsresolve.alias
以 React 为例,对于在
main.js
中,同样:再看 html 中: