Javascript 网页包添加JS库

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"
  }
}

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

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:

{
  "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"
  }
}

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

我使用了以下命令：webpack--env=prod--config=webpack.config.js

运行命令后，我在浏览器中打开页面/app/index.html

但是页面上的错误是：

---

未捕获引用错误：WOW未定义

这里的问题是，当您的e包正在生成时。在那里的某个地方，你的JS引用了

WOW

对象。由于目前没有DOM存在，

WOW

没有附加到DOM，因此您会看到错误

解决方案是使用，无论何时由任何块进行引用，都可以使引用成为有效的引用。如文件所述：

自动加载模块。每当模块中遇到

标识符

作为自由变量时，

模块

将自动加载，

标识符

将填充加载的

模块

的导出

在您的情况下，您可以添加以下代码段，它将起作用

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

*编辑：* 传递给

ProvidePlugin

的值是加载模块的值

所以

import 'jquery';

你会用

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

在引擎盖下，插件搜索导入到某处的

jquery

模块，并提供参考

回答你的评论。如果您使用了

import'wowjs'

，则必须将

wowjs

作为

WOW

的值传递给插件

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

很抱歉错过了这一部分，我假设您将以

wow

而不是

wowjs

的形式导入它，因为这是正确的方式

import * as wow from "wowjs"

---

在任何情况下，您都可以使用前面的代码段，您应该可以继续使用。

@DarrenSweeney，该包名为

wowjs

Uncaught错误：找不到模块“WOW”@user5671335，您可以共享您正在使用的

import

或

require

WOW语句吗