Question

我的一个模块是外部插件（WOW效果），需要在index.html初始化才能正常使用：

<script>
new WOW().init();
</script>

如果我将插件用作完全外部文件 - 它可以正常工作。但是当我用webpack编译它时，它给了我一个错误：

未捕获的ReferenceError：未定义哇。

我的配置文件如下所示：

module.exports = {
    entry: './modules/_entry.js',
    output: {
        filename: 'bundle.js'
    }
};

和_entry.js包含：

require("./wow.js");

我做错了什么？

Answer 1

有两种可能性：

外部这个的好处是您可以轻松地交换本地脚本文件，例如CDN。 在此方法中，脚本源是外部供应商文件。
- 拥有一个包含供应商脚本的文件夹，例如WOW。
- 使用<script src="vendors/WOW.js">在您的HTML文件中链接到它。
- 您可以在另一个<script>标记内自由进行上述初始化。
- 将 externals 配置添加到您的webpack配置：

var config = {
  entry: [...],
  output: {...},
  externals: {
    Wow: 'WOW'
  },
  module: {...},
  plugins: [...]
};

从现在开始，您可以在所有应用程序模块中访问人工模块Wow，并且可以import或require（尽管以防万一） WOW，我觉得你不需要它。）

Expose-loader 这种方式让您可以移动到通常用作的全局范围模块......好吧，模块:) 在此方法中，源代码脚本是一个模块（你自己的，或者用npm安装）。
- 安装插件：npm install expose-loader --save-dev
- 将公开加载程序配置添加到您的webpack配置文件中：

var config = {
  entry: [...],
  output: {...},
  module: {
    loaders: [{
      ...
    }, {
      test: 'path/to/your/module/wow.min.js',
      loader: "expose?WOW"
    }]
  },
  plugins: [...]
};

这应该使WOW成为全局变量，可在<script>标记内使用。

在webpack bundle.js中初始化第三方插件

1 个答案: