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

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("") 添加其他 js 文件或 import在适当的源文件 . imports如果路径相对正确，则在您的条目中看起来不错。

请编辑 OP 以包含您的

webpack.config.js

文件夹结构

如果问题仍然存在。

更新:
您正在尝试使用 TypeScript 代码，但 webpack 对此一无所知。 iow 那里没有 typescript 转译配置。 Webpack 可以将 typescript 转换成 javascript，并且有据可查 here .

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

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