正在初始化webpack bundle.js中的第三部分插件

Initializing third-part plugin in webpack bundle.js

本文关键字：三部 插件 初始化 webpack bundle js      更新时间：2023-09-26

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

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

如果我将插件作为一个完全外部的文件使用，它就可以工作了。但当我用webpack编译它时，它会给我一个错误：

未捕获的ReferenceError:未定义wow。

我的配置文件如下：

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

entry.js包含：

require("./wow.js");

我做错了什么？

有两种可能性：

  1. Externals此脚本的好处是，您可以轻松地将本地脚本文件交换为CDN文件在这种方法中，脚本的源是一个外部供应商文件

    • 有一个文件夹，你的供应商脚本，如WOW
    • 使用<script src="vendors/WOW.js">在HTML文件中链接到它
    • 您可以在另一个<script>标记内进行如上所述的初始化
    • 将外部配置添加到您的webpack配置中：

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

  • 从现在起，您可以访问所有应用程序模块中的人工模块Wow，也可以访问它们的import或require（尽管在WOW的情况下，我认为您不需要它）

  1. Expose-loader通过这种方式，您可以移动到通常用作…嗯，modules:）的全局作用域模块在这种方法中，脚本的源是一个模块（您自己的模块或与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>标记中使用
相关文章：