webpack全局引入库

我们在日常开发的时候会遇到一些每个页面都可能会引用到的库(例如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写法