【webpack】expose-loader 插件使用

如何使用expose-loader 解決第三方庫的插件依賴問題

expose 寓意爲：暴露，就是爲了解決一些插件不支持commonJs引入的問題（如:bootstrap.js，它只允許jQuery暴露爲全局變量纔可用）

這是bootstrap源碼的開頭。

    if (typeof jQuery === 'undefined') {
      throw new Error('Bootstrap\'s JavaScript requires jQuery')
    }

經過一系列的搜索之後，得到了一些答案，有的說可以在webpack配置 externals 屬性。如下：

module.exports = {
    // ...
    externals: {
        jquery: 'jQuery'
    }
    // ...
};

然後再代碼中使用 var jquery = require('jquery'); 對靜態文件使用script全局包含.
當然我們可以同時引入其它插件。

<script src='jquery.js'></script>
<script src='bootstrap.js'></script>    

但這樣並不是我們想要的最終目的。 我們想要用require 把 js庫 引入進來,最後講它們進行編譯。expose-loader給我們了這樣的功能。

安裝 node模塊
npm install jquery --save
npm install bootstrap --save

安裝 expose-loader

npm install expose-loader --save-dev

修改 webpack.config.js

module.exports = {
    loaders: [{
        // 得到jquery模塊的絕對路徑
        test: require.resolve('jquery'),
        // 將jquery綁定爲window.jQuery
        loader: 'expose?jQuery'
    }]
};

ps : 如果想要讓一個模塊有多個注入全局變量，那麼需要以下配置

module.exports = {
    loaders: [{
        // 得到jquery模塊的絕對路徑
        test: require.resolve('jquery'),
        // 將jquery綁定爲window.jQuery 和 window.$
        loader: 'expose?jQuery!expose?$'
    }]
};

最後在main.js 使用

    var jquery = require('jquery');
    // 插件注入jquery
    require('bootstrap');   

---

如果在 js中使用expose加載器

    // 這裏 jquery 作爲模塊名 ，jQuery爲輸出變量名
    var jquery = require("expose?jQuery!jquery");