找不到 webpack es6 模块

Question

I am new to webpack, want to bundle my js classes I am using es6 classes and linqjs.min, jquery-3.4.1.js and gsap.min for starter I want only to bundle index.js and my class but I get an error Module not found: cant resolve (myclass) in src directory in my index.js for importing class:

import myClass from 'js/myClass'

and for exporting my class I used

export class myClass{ } and module.export= myClass

my webpack.config.js is:

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"
    })
]}

I don't understand my mistake how can I fix it. Thanks.

Answer 1

You are trying to do a default import, whereas you are doing a named export.

Either go with a default export, adding the default keyword:

export default class MyClass {}

along with

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

Or, go with a named export / import:

export class MyClass {}

with

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

Please note that by convention, class names start with a capital letter.

Medium has a good article on the difference: https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910