无法从 webpack 包中访问定义的导出？答案

【问题标题】：Can not access defined exports from the webpack bundle?无法从 webpack 包中访问定义的导出？
【发布时间】：2020-08-02 20:41:33
【问题描述】：

我正在尝试从现有的 js 文件组成一个 webpack 包，并在其他 JS 文件和偶尔在 html 脚本标签中使用来自该包的导出。后来添加 babel 以将整个内容转换为 es5，因此用 babel 和 ts 注释掉了部分，顺便说一句工作正常。现在我在使用直接 webpack 导出时遇到问题。

Webpack 配置如下：

var path = require('path');
const { updateCommaList } = require('typescript');

module.exports = {
    entry: {
        'core' : [
        './src/utils.js',
        './src/zdlg.js'
        ]
    },
    devtool: 'source-map',
    stats: 'verbose',
    resolve: {
      modules: ['node_modules']
    },
    resolveLoader: {
      extensions: ['.ts', '.tsx'],
      mainFields: ['loader', 'main']
    },
    output: {
      filename: '[name].js',
      library: "LIB",
      libraryTarget: 'var',
      path: path.resolve(__dirname, "dist")
    },
    module: {
     }
  };

我可以捆绑文件，那里没有错误。我正在使用 export 语句导出函数，如下所示：

export function v ...

在我的html文件中

<script src="./core.js"></script>
<script type="module" src="./io.js"></script>

经过最近几天的修补，我想出了几件事。

如果我在核心对象的入口部分有一个文件，则导出工作，因为 LIB 变量具有每个导出函数的属性，我可以调用 LIB.v() 很好。
无论如何导入都不起作用，即 io.js 导入：

import {v} from './core.js';

在加载页面时生成错误：Uncaught SyntaxError: import not found: v 对于上面的行。

将第二个文件添加到条目会导致 webpack 覆盖第一个文件的导出。最初我没有看到任何导出的原因是 zdlg.js 没有导出任何内容，而 LIB 没有导出。如果 zdlg.js 导出任何函数，则它们是唯一出现在 LIB 上的函数。

所以，最后，我可以从单个文件中导出函数，但我认为 webpack 的全部目的是允许从多个文件中组合模块。

我不确定我错过了什么或哪里出错了，应该是非常基本的东西......

如果它很重要，这里也是开发部门列表：

  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "install": "^0.13.0",
    "npm": "^6.14.7",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.0.9"
  }

【问题讨论】：

标签： javascript webpack webpack-4

【解决方案1】：

让它工作，虽然不确定这是否是最好的方法。

基本上，我没有在导出的条目部分添加多个条目，而是创建了 index.js 文件，该文件从我需要的文件中重新导出了所有导出：

require('./src/ut');
require('./src/zd');

export * from './src/ut';
export * from './src/zd'

条目现在只是 index.js

entry: {
        'core' : 'index.js'
    },

按预期工作，但我不确定 webpack 为什么不自动执行此操作，以及为什么我必须自己导出所有内容...

【讨论】：