Initialization of the third part plugin in webpack bundle.js

Question

One of my modules is an external plugin (WOW effect), which must be initialized in index.html for it to work properly, using:

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

If I use the plugin as a completely external file, it works. But when I compile it using webpack, it gives me an error:

Uncaught ReferenceError: wow not defined.

My configuration file looks like this:

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

and _entry.js contains:

require("./wow.js");

What am I doing wrong?

Answer 1

There are two possibilities:

---

• . , script, , CDN. script .

  • , WOW.
  • HTML <script src="vendors/WOW.js">.
  • , , <script>.
  • webpack:

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

• Wow , import require ( WOW , ).

---

2. Expose-loader. , ... , :) script ( , 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>.