与Web Pack捆绑后无法导入模块

Question

我有以下index.js代码：

import {Asp} from './src/asp.js';

export default Asp;

以及以下run.js代码：

import Asp from './dist/bundle.js'; // Uncaught SyntaxError: The requested module does not provide an export named 'default'
import Asp from './index.js'; // works

const myASP = new Asp();

和webpack（3.11）配置文件：

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
};

我无法弄清楚为什么导入时使用bundle.js无法使用...帮助...

UPDATE：

我放弃了webpack，并通过以下配置解决了我的问题，开始进行汇总：

import uglify from 'rollup-plugin-uglify';

export default {
    input: 'src/index.js',
    output:{
        file: 'dist/index.js',
        name: 'Asp',
        format: 'es'
    },
    plugins: [
        uglify()
    ]
}

我不知道在webpack中有什么等效的功能-但这确实起作用了！

Answer 1

默认情况下，Webpack输出一个脚本文件，这意味着它没有导出，因此尝试将其导入另一个文件不会产生任何结果。

要告诉Webpack将捆绑软件输出为可重用的库，您需要告诉它使用output.libraryTarget来执行此操作，因此在您的情况下，您可能希望进行调整

output.libraryTarget

成为

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
},

Answer 2

在index.js文件中，您只需要导入Asp，然后删除导出行。因此index.js文件将是：

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2'
},

在run.js中

import {Asp} from './src/asp.js';

Answer 3

import {Asp} from './dist/bundle.js'; 

const myASP = new Asp();