Webpack添加JS库

Question

package.json:

{
  "name": "**",
  "version": "1.0.0",
  "description": "**",
  "dependencies": {
    "lodash": "4.17.4",
    "jquery": "3.2.1",
    "jplayer": "2.9.2",
    "jquery-ui": "1.12.1",
    "owl.carousel": "2.2.0",
    "wowjs": "1.1.3"
  },
  "devDependencies": {
    "webpack": "2.3.3",
    "webpack-dev-server": "2.4.2",
    "html-webpack-plugin": "2.28.0",
    "extract-text-webpack-plugin": "2.1.0",
    "clean-webpack-plugin": "0.1.16",
    "babel-core": "6.24.1",
    "babel-loader": "6.4.1",
    "babel-preset-es2015": "6.24.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "uglify-js": "2.8.21",
    "html-loader": "0.4.5",
    "style-loader": "0.16.1",
    "css-loader": "0.28.0",
    "url-loader": "0.5.8",
    "stylefmt": "5.3.2",
    "file-loader": "0.11.1",
    "purifycss-webpack": "0.6.0"
  },
  "scripts": {
    "build:dist": "webpack --env=prod --config=webpack.config.js",
    "build:dev": "webpack-dev-server --env=dev --config=webpack.config.js"
  }
}

webpack.config.js:

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = function (env) {
  return {
    devServer: {
      inline: true
    },
    devtool: 'source-map',
    context: __dirname,
    entry: {
      landing: [
        './node_modules/wowjs',
        './js/landing.js'
      ]
    },
    output: {
      path: path.resolve(__dirname, './app/'),
      filename: 'js/[name].js',
      chunkFilename: '[id].js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['es2015'],
              plugins: ['transform-runtime']
            }
          }
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader']
          })
        },
        {
          test: /\.html$/,
          use: 'html-loader'
        },
        {
          test: /\.(eot|woff|ttf|svg|png|jpg)$/,
          use: 'url-loader?limit=50000&name=assets/[name]-[hash].[ext]'
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(['app']),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        _: 'lodash'
      }),
      new ExtractTextPlugin({
        filename: (getPath) => {
          return getPath('css/[name].css');
        },
        allChunks: true
      }),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['landing', 'bundle'],
        favicon: './img/favicon.png',
        template: './pages/index.html',
        inject: true
      }),
      new CommonsChunkPlugin('bundle')
    ]
  };
};

landing.js:

$(() => {
  const wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 100,
    mobile: false
  });
  wow.init();
});

I used the command: webpack --env=prod --config=webpack.config.js

After running the command I open the page /app/index.html in the browser

But the error on the page: Uncaught ReferenceError: WOW is not defined

Answer 1

The problem here is that when your'e bundles are being made. Somewhere in there, your JS references WOW object. As at the moment there is no DOM present, WOW is not attached to the DOM and hence you see the error.

The solution is to use the ProvidePlugin which make the reference a valid one whenever it is made by any chunk. As described in the documentation :

Automatically loads modules. Whenever the identifier is encountered as free variable in a module, the module is loaded automatically and the identifier is filled with the exports of the loaded module .

In your case you can add the following snippet and it'll work

    plugins: [
    ....
      new webpack.ProvidePlugin({
        WOW: 'wowjs',
      })
    ]

*EDIT: * The value you pass to the ProvidePlugin is the one who's module is loaded

So for

import 'jquery';

you'd use

new webpack.ProvidePlugin({
    $: 'jquery',
})

Under the hood, plugin searches for jquery module imported somewhere and makes the reference available.

To answer your comment. If you've use import 'wowjs' you'll have to pass wowjs to the plugin as the value for WOW

new webpack.ProvidePlugin({
    WOW: 'wowjs',
})

Sorry for missing out on this part, I had assumed that you would have imported it as wow instead of wowjs as that's the correct way to do it.

import * as wow from "wowjs"

In any case, you can use the previous snippet and you should be good to go.