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写法