Webpack 网页包可以'；不能导入某些npm库

我正在将我的整个设置从grunt切换到webpack，我以前在grunt文件中包括了这样的库

这很好，我只是在我的文档中包含了代码，可以使用它

我是webpack的新手，我正在用导入语句尝试以下内容

import $ from 'jquery';
import 'counterup'; 

$(document).ready(function() {

    $('.counter').counterUp({
    delay: 10,
    time: 1000
});

});

我明白了

您可能需要适当的加载程序来处理此文件类型

我看了一些不同的教程，不知道我做错了什么。我还尝试了一些不同的倒计时库，结果都是一样的

有人能告诉我哪里出了问题吗

---

谢谢

我不确定出了什么问题，但是

倒计时

jQuery插件太旧了，已经很久没有更新了。
您可以使用。 下面是使用

webpack4

的

countUp.js

的工作示例。 webpack.config.js

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanPlugin(['./dist']),
    new HtmlPlugin({
      title: 'test',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

import CountUp from 'countup.js';
$('body').html('<span id="counter">1,234,567.00</span>');
var numAnim = new CountUp('counter', 24.02, 99.99);
if (!numAnim.error) {
  numAnim.start();
} else {
  console.error(numAnim.error);
}

src/index.js

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanPlugin(['./dist']),
    new HtmlPlugin({
      title: 'test',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

import CountUp from 'countup.js';
$('body').html('<span id="counter">1,234,567.00</span>');
var numAnim = new CountUp('counter', 24.02, 99.99);
if (!numAnim.error) {
  numAnim.start();
} else {
  console.error(numAnim.error);
}

从'CountUp.js'导入CountUp；
$（'body'）.html（'1234567.00'）；
var numAnim=新的计数（'计数器'，24.02,99.99）；
如果（！numAnim.error）{
numAnim.start（）；
}否则{
控制台错误（numAnim.error）；
}

你确实是对的，另一个倒计时工作只是好奇你会如何用Webpack处理过时的库？使用grunt时，您只需包含文件url。Webpack是否有类似的回退？过时的libs不支持

import

语句，因此如果要使用它，必须手动修改其源代码。我没有使用grunt，所以我不确定它如何处理过时的lib。