【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");