找不到 webpack es6 模块

Question

我是 webpack 的新手，想捆绑我的 js 类我正在使用 es6 类和 linqjs.min、jquery-3.4.1.js 和 gsap.min 作为初学者我只想捆绑 index.js 和我的类，但我得到了错误未找到模块：无法在我的 index.js 中的 src 目录中解析 (myclass) 以导入类：

import myClass from 'js/myClass'

并导出我使用的课程

export class myClass{ }和module.export= myClass

我的 webpack.config.js 是：

const HTMLWebPackPlugin = require ('html-webpack-plugin');
module.exports = {
module:{
    rules:[
        {
            test: /\.js$/,
            exclude:/node_modules/,
            use:{
                loader:"babel-loader"
            }
        },
        {
            test:/\.html$/,
            use:[{
                loader:"html-loader",
                options:{minimize:true}
            }]
        }
    ]
},
plugins:[
    new HTMLWebPackPlugin({
        template:"./src/index.html",
        filename: "./index.html"
    })
]}

我不明白我的错误我该如何解决。 谢谢。

Answer 1

您正在尝试执行默认导入，而您正在执行命名导出。

要么使用默认导出，添加default关键字：

export default class MyClass {}

随着

import MyClass from './js/MyClass.js';

或者，使用命名的导出/导入：

export class MyClass {}

和

import { MyClass } from './js/MyClass.js';

请注意，按照惯例，类名以大写字母开头。

Medium 有一篇关于区别的好文章： https : //medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910