无法通过Webpack将通过VPM安装的ES6模块导入Javascript文件

Question

我正在使用Webpack在我的Web应用程序中编译ES6 Javascript。我通过NPM安装了插件（Html5Sortable），现在它位于我的node_modules文件夹中。

我的Webpack入口点是./src/app.js。在此文件中，我调用了另一个名为InputBoxPane的ES6类：

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行看到我正在尝试导入存在于node_modules中的html5sortable文件：

我已经尝试了import html5sortable from 'html5sortable/dist/htmlsortable.es.js的每一个化身。

尽管代码可以编译，但是我在浏览器中收到一条错误消息，提示“找不到排序”。当我在老式标签中引用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
            },

          })
      ]
  };

Answer 1

如果它位于node_modules中，则应使用require：

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