webpack - 与 webpack 捆绑后无法导入模块

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

我不明白为什么当我导入...help...时使用bundle.js不起作用

更新:

我放弃了 webpack，转而使用 rollup，使用以下配置解决了我的问题:

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: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
},

成为

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