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

Question

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

4

我对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语句添加它们？我应该将它们添加到entry.ts文件还是webpack.config.js文件中？

我尝试过以下方式，但没有成功：

entry.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文件相同的文件夹中。

- tesicg

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rakesh Kumar Cherukuri · Accepted Answer

在我们进行具体修复之前，这里是webpack的一般概念：

Webpack需要一个入口点和输出位置
从入口点，当Webpack运行时，它会构建一个依赖关系图
Webpack然后处理所有在依赖关系图中的资源
可以配置加载器来进行任何特定资源（js、css、ts等）的处理
处理过的资源将被放置在输出位置

针对你的问题，人们通常在源文件中的需要功能的地方使用`require("./resource");`或`import`。不是在`webpack.config.js`中。正如之前提到的，webpack所需的只是一个入口点。入口资源反过来应该声明依赖项。

解决问题方法如下：

确保在`webpack.config.js`中正确配置了入口点。
确保在适当的源文件中使用`require("")`或`import`添加其他js文件。你的入口中的导入看起来很好，只要路径相对正确即可。

如果问题仍然存在，请编辑原始帖子以包括以下内容：

webpack.config.js
文件夹结构

更新：您试图使用TypeScript代码，但是webpack对此一无所知，即没有typescript转译配置。 webpack可以将typescript转译为javascript，并且已有很好的文档说明在这里。

正如之前提到的，loaders根据资源类型进行较重的操作。建议尝试使用`babel-loader`。

还要确保在您的源js/ts文件中良好定义了依赖项。入口文件（即Main.js）应将所有必需模块作为依赖项（使用`import`或`require`）。从您的文章中不清楚`Main.js`如何依赖于`entry.ts`。