将通过VPM安装的ES6模块连同网页包导入Javascript文件时出现问题

我正在使用Webpack在我的webapp中编译ES6 Javascript。我通过NPM安装了一个插件（），它现在位于我的node_modules文件夹中

我的网页入口点是

/src/app.js

。在这个文件中，我调用另一个ES6类InputBoxPane：

import './InputBoxPane.scss';
import InputBoxPaneTemplate from './InputBoxPane.handlebars';
import 'html5sortable/dist/html5sortable.es.js';

export default class InputBoxPane {
    // Other code

    SetupDraggable() {
        sortable('.input-element-container', {
            forcePlaceholderSize: true,
            placeholderClass: 'ph-class',
            hoverClass: 'bg-maroon yellow'
        });
    }
}

您可以在第3行看到，我正在尝试导入节点_模块中存在的HTML5可排序文件：

我已经尝试了从“html5sortable/dist/htmlsortable.es.js”导入html5sortable的每一个具体版本

虽然代码可以编译，但我的浏览器中出现了一个错误，显示“无法找到可排序的”。当我在一个老式的标记中引用Html5Sortable.js文件时，一切正常，所以看起来该文件没有正确地包含在我的包中

这是我的webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
const autoprefixer = require('autoprefixer');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    entry: {
        bundle: './src/app.js'
    } ,
    output: {
        path: path.resolve(__dirname, '../dist')
    },
    devtool: isDevelopment && "source-map",
    devServer: {
        port: 3000,
        open: true,
        contentBase: path.join(__dirname, "../src"),
    },
    module: {
        rules: [
            { test: /\.handlebars$/, loader: "handlebars-loader" },
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: isDevelopment,
                            minimize: !isDevelopment
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            autoprefixer: {
                                browsers: ["last 2 versions"]
                            },
                            sourceMap: isDevelopment,
                            plugins: () => [
                                autoprefixer
                            ]
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: isDevelopment
                        }
                    }
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'static/',
                            useRelativePath: true,
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                          mozjpeg: {
                            progressive: true,
                            quality: 65
                          },
                          optipng: {
                            enabled: true,
                          },
                          pngquant: {
                            quality: '65-90',
                            speed: 4
                          },
                          gifsicle: {
                            interlaced: false,
                          },
                          webp: {
                            quality: 75
                          }
                        }
                    }
                ]
            }
        ] 
    },
    plugins: [
        /** Since Webpack 4 */
        new webpack.LoaderOptionsPlugin({
            options: {
              handlebarsLoader: {}
            }
          }),
          new MiniCssExtractPlugin({
            filename: "[name]-styles.css",
            chunkFilename: "[id].css"
          }),  

        new HtmlWebpackPlugin({
            title: 'My awesome service',
            template: './src/index.handlebars',
            minify: !isDevelopment && {
                html5: true,
                collapseWhitespace: true,
                caseSensitive: true,
                removeComments: true,
                removeEmptyElements: true
            },

          })
      ]
  };

---

如果它位于

节点\u模块中

，则应使用

要求

：

require("html5sortable/dist/html5sortable.es");

---

如果它位于

节点\u模块中

，则应使用

要求

：

require("html5sortable/dist/html5sortable.es");

---

这里有一个未经验证的答案，希望有帮助：这里有一个未经验证的答案，希望有帮助：