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