如何使用 webpack 包含 VelocityJS

Question

我刚开始使用 webpack，一直在反复尝试解决这个问题。该项目的webpack.config是这样的：

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'static')
  },
  watch: true,
  // watchOptions:{
  //   ignored: /woff/
  // },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        // use: [
        //   'style-loader',
        //   'css-loader',
        //   'sass-loader'
        // ]
        use: [
                    {
                      loader: 'file-loader',
                      options: {
                        name: '[name].css',
                        outputPath: 'assets/css/'
                      }
                    },
                    {
                      loader: 'extract-loader'
                    },
                    {
                      loader: 'css-loader'
                    },
                    {
                      loader: 'postcss-loader'
                    },
                    {
                      loader: 'sass-loader'
                    }
                  ]
      },
      {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/fonts/',    // where the fonts will go
            // publicPath: '../'       // override the default path
          }
        }]
      },
    ]
  },
   externals: {
      "window.jQuery": "jquery",
      "velocity": 'velocity-animate'

  },
  plugins: [
    new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}
module.exports = config;

index.js包括以下内容：

import 'bootstrap';

require('velocity-animate');
require('velocity-animate/velocity.ui');

import './scss/main.scss';
require('typeface-raleway')

UI 脚本在 Velocity 之前加载，即使我更改 index.js 中的顺序也是如此。

而且，在控制台上调用 velocity() 只是说该函数未定义。我在这里不知所措。

我是否正确加载了模块？

如何保证脚本的正确顺序？

Answer 1

这个问题的解决方案是在 webpack.config.js 中从 externals 中删除 velocity 并使用以下方法加载和使用导入的函数：

import Velocity from 'velocity-animate';

var blue = $('polygon#blue');

Velocity( blue,
  {opacity: 0.5 },
    {
      loop:13,
      duration:2000,
      easing: "swing" }
    );

如何使用 webpack 包含 VelocityJS

How to include VelocityJS using webpack

javascript

webpack

velocity.js