Webpack - 将通用文件导入大型代码库的问题

时间:2017-05-22 20:54:58

标签: javascript webpack

我有一个名为'third_party.js'的文件,如下所示。我想将这个带入现有的webpack应用程序(不是通过使用导入或在我的代码库中需要 - 但仅限于webpack)。正如您所看到的,IIFE需要窗口和$才能工作。我的应用程序中有很多.btns可以点击,希望有一种简单的方法可以在全球范围内处理这个问题。

third_party.js

(function (window, $) {

  $(function () {
    $('.btn').on('click', function (event) {
      event.preventDefault();
      console.log("button was clicked");
    });
  });

})(window, jQuery);

1 个答案:

答案 0 :(得分:1)

您可以将此文件添加到Webpack的entry中。

例如:

module.exports = {
    entry: [
        '/path/to/third_party.js',
        'path/to/original/file.js'
    ],
    output: {
        path: 'path/to/output/dir',
        name: 'bundle.js'
    },
    ...
};

在包含Webpack捆绑包文件(Webpack输出)之前,请确保在页面上的脚本标记中加载了jQuery。

类似的东西:

<script src="cdn.com/jquery.min.js"></script>
<script src="path/to/output/dir/bundle.js"></script>