Question

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

https://www.npmjs.com/package/counterup

module.exports = function(grunt) {

  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      watch: {
          scripts: {
              files: ['js/*.js'],
              tasks: ['concat:dist1', 'uglify:dist2min']
          },
      },
      concat: {
          options: {
              separator: '\n',
              sourceMap: true
          },
          dist1: { 
              src: [
                  'node_modules/counterup/jquery.counterup.js',
              ],
              dest: 'dist/dist.js'
          },
      },
      uglify: {
          dist2min: {
              options: {
                  mangle: false,
                  drop_console: false
              },
              files: {
                  'dist/bundle.min.js': ['dist/bundle.js']
              }
          }
      },
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.registerTask('default', ['watch', 'concat:dist1', 'concat:dist2', 'uglify:dist2min', 'cssmin:dist3min']);

};

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

我是webpack的新手，我正在使用import语句尝试以下内容。

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

$(document).ready(function() {

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

});

我得到了

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

我已经看了几个不同的教程，无法弄清楚我做错了什么我还尝试了几个不同的计数库，所有这些都有相同的结果。

有人可以告诉我哪里出错了吗？

由于

Answer 1

我不确定是什么问题，但是countUp jQuery插件太旧了，并且没有更新这么久。
您可以改用countUp.js。以下是countUp.js与Webpack 4的工作示例。的 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', }), ], };

<强>的src / index.js

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

Webpack无法导入某些npm库

1 个答案: