Question

我是Webpack的新手并在stackoverflow上阅读类似帖子，但他们没有帮助我。我已成功将我的js文件作为模块添加到bundle.js文件中，但也希望添加其他文件：

<script src="~/Scripts/jquery-3.2.1.js"></script>
<script src="~/Scripts/dx.all.js"></script>
<script src="~/Scripts/go-1.7.11.js"></script>

如何使用import子句添加它们？我应该将它们添加到条目.ts文件还是webpack.config.js文件中？

我尝试了以下内容，但它不起作用：

条目.ts文件：

import './../Scripts/jquery-3.2.1.js';
import './../Scripts/dx.all.debug.js';
import './../Scripts/go-1.7.11.js';

import { Caller } from './Caller';

window.onload = () => {
    let caller: Caller = new Caller();
    caller.execute();
};

更新：

1）webpack.config.js：

module.exports = {
    entry: './Main.js',
    output: {
        filename: 'bundle.js'
    }
};

2）所有其他.js文件都放在Main.js文件所在的文件夹中。

Answer 1

在我们进行任何特定修复之前，这里是webpack的一般概念

Webpack需要entry点和output位置
从entry开始，当webpack运行时，它会构建一个依赖关系图
Webpack然后处理依赖图中的所有这些资源
可以配置loaders来执行任何资源（js，css，ts等）特定处理
已处理的资源将放置在output位置

回到你的问题，通常在源文件中使用require("./resource");或import，无论它在功能上需要什么。不在webpack.config.js。如前所述，所有webpack需求都是entry。入口资源又应该声明依赖项。

解决问题：

确保在entry

webpack.config.js

确保使用require("")或import在相应的源文件中添加其他js文件。如果路径相对正确，则条目中的imports看起来很好。

请编辑OP以包含您的

webpack.config.js
文件夹结构

如果问题仍然存在。

更新：您正在尝试使用TypeScript代码，但Webpack并不知道任何有关它的信息。哇没有打字稿编译配置那里。 Webpack可以将打字稿转换为javascript，并且有详细记录here。

如前所述，loaders根据资源类型执行繁重的工作。建议尝试使用babel-loader。

另外，请确保在源js / ts文件中明确定义了依赖项。 entry文件（即Main.js）应该具有所有必需的模块作为依赖项（使用import或require）。在您的帖子中，不清楚Main.js与entry.ts

如何将第三方js文件添加到Webpack包中？

1 个答案: