webpack全局引入库

时间:2025-03-15 12:35:07

我们在日常开发的时候会遇到一些每个页面都可能会引用到的库(例如jquery)

这可能会导致我们在每一个页面都需要写这样一个语句:

import $ from 'jquery';

可能有人会担心,最后打包的时候,会不会重复的引入这个库的代码?

webpack很聪明,无论在多少个模块页引入,同一个库最后打包也只会打包一次


但是最大的问题是:我们要重复地写这个import语句无数次,有点恶心

其实,webpack提供了一个方法,让我们一劳永逸:

const webpack = require('webpack');

//...
plugins:[
//..
new webpack.ProvidePlugin({
jq: 'jquery' //webpack会检测模块代码有没有使用jq,有就会自动帮你import
})
]

注意:我们的webpack.config.js引入模块的方式只接受require,只有到真正的开发页面才接受es6的import export写法