Wow.js with webpack and responsive

Question

I am trying to implement wow.js using reaction and webpack.

I install it through npm.

npm install --save wow.js

It installs perfectly. Now the problem is how to import it correctly. I can't get it to work while continuing to get undefined.

I tried several ways:

First of all:

import wow from 'wow.js';

But webpack cannot compile it. He says the module could not be found. Even i use full urlimport wow from /node_modules/wow.js

---

Secondly:

I am using this solution from here :

require('imports?this=>window!js/wow.js');

But I still can't find the modules (I am changing the path to my node_modules).

---

Third:

From here :

I use the exposure module and try to new WOW().init();say Wow is undefined.

, , html , bundle.js script.

---

. , ?

!

---

my webpack.config.js:

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        'bootstrap-loader',
        'webpack/hot/only-dev-server',
        './src/js/index.js'
    ],
    output: {
        path: __dirname + "/build",
        publicPath: "/build/",
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'react-hot!babel'
            },
            {
                test: /\.css$/,
                loader: 'style!css!postcss'
            },
            {
                test: /\.scss$/,
                loader: 'style!css!postcss!sass'
            },
            { test: /\.(woff2?|ttf|eot|svg|otf)$/, loader: 'url?limit=10000' },
            {
              test: 'path/to/your/module/wow.min.js',
              loader: "expose?WOW"
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    },
    postcss: [autoprefixer]
};

Answer 1

• exports-loader

  npm i exports-loader --save-dev

• webpack.config.js

  {
     test: require.resolve('wow.js/dist/wow.js'), 
     loader: 'exports?this.WOW'
  }
  

• import

  import WOW from 'wow.js/dist/wow.js';

Answer 2

.

• WOW.js: npm install wowjs
• : import WOW from 'wowjs';

• componentDidMount() : new WOW.WOW().init();

  import React, {Component} from 'react';
  import WOW from 'wowjs';
  
  class Cmp extends Component {
    componentDidMount() {
      new WOW.WOW().init();
    }
  
    render() {
      /* code */
    }
  }
  
  export default Cmp;
  

Answer 3

.call(this) .call(window) ( wow.js). https://foundation.zurb.com/forum/posts/46574-how-to-add-js-library-from-bower