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();
});

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

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

但页面上的错误：未捕获的ReferenceError：未定义WOW

Answer 1

这里的问题是当你的捆绑制作时。在那里的某个地方，你的JS引用了WOW个对象。由于目前没有DOM存在，WOW未附加到DOM，因此您会看到错误。

解决方案是使用ProvidePlugin，无论何时由任何块创建引用，它都会使引用成为有效引用。如文档中所述：

自动加载模块。只要在模块中遇到identifier作为自由变量，module就会自动加载，而identifier会填充已加载的module的导出。

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

    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"

在任何情况下，你都可以使用上一个片段，你应该好好去。

Webpack添加JS库

1 个答案: