导入外部JS到Webpack的多种方法包括：使用CDN、通过script-loader、使用externals配置、直接在HTML文件中引入。
其中，使用externals配置是最常见和有效的方法之一。通过externals配置，我们可以将外部JS库声明为外部依赖项，这样Webpack在打包时会忽略这些库，从而减小打包后的文件体积，并且不需要在代码中频繁引入这些库。下面详细介绍这一方法。
一、使用externals配置
externals配置是Webpack中一个强大的功能，它允许你在打包过程中排除某些依赖项，使其在运行时从外部环境（如CDN或全局变量）中获取。这对于一些已经通过CDN加载的库特别有用，如jQuery、React等。
1. 配置Webpack中的externals
首先，你需要在Webpack配置文件（通常是webpack.config.js）中添加externals配置。假设你要排除jQuery，可以这样配置：
module.exports = {
// 其他配置
externals: {
jquery: 'jQuery'
}
};
在这个配置中，'jquery'表示你在代码中使用的模块名称，而'jQuery'是这个模块在外部环境中的全局变量名称。
2. 在HTML文件中引入外部JS
接下来，你需要在你的HTML文件中通过CDN或者其他方式引入jQuery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
这样，当你的代码中使用import $ from 'jquery';时，Webpack会知道从外部环境中获取jQuery，而不是将其打包到bundle.js中。
二、通过script-loader引入外部JS
script-loader是一个Webpack加载器，可以直接在你的代码中通过require或import语句加载外部JS文件，并将其作为脚本标签插入到HTML中。虽然这种方法不如externals配置那样常用，但在某些情况下也非常有用。
1. 安装script-loader
首先，你需要安装script-loader：
npm install script-loader --save-dev
2. 在代码中使用script-loader
然后，在你的代码中，你可以这样引入外部JS：
require('script-loader!https://code.jquery.com/jquery-3.6.0.min.js');
这种方法的一个缺点是，它会将外部JS文件直接插入到HTML中，可能会导致加载顺序问题。因此，在使用时需要小心。
三、直接在HTML文件中引入外部JS
这种方法最为简单直接，适用于不需要复杂配置的场景。你可以直接在你的HTML文件中通过script标签引入外部JS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
这样，外部JS会在你的应用加载时一同加载，适合简单的项目。
四、使用CDN引入外部JS
CDN（内容分发网络）是一种常见的引入外部JS库的方法，特别是对于一些流行的库，如React、Vue等。CDN可以加快资源加载速度，并减少你的服务器负担。
1. 在HTML文件中引入CDN
你可以直接在你的HTML文件中通过script标签引入CDN：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
2. 配置Webpack中的externals
为了让Webpack知道这些库已经通过CDN引入，你仍然需要在Webpack配置文件中添加externals配置：
module.exports = {
// 其他配置
externals: {
react: 'React',
'react-dom': 'ReactDOM'
}
};
这样，你的代码中可以直接使用React和ReactDOM，而不需要将其打包到bundle.js中。
五、通过npm包管理工具引入外部JS
在一些复杂的项目中，你可能需要通过npm来管理你的外部JS库。这样可以方便地进行版本控制和依赖管理。
1. 安装外部JS库
首先，你需要通过npm安装你需要的外部JS库。例如，如果你需要使用Lodash：
npm install lodash
2. 在代码中引入外部JS库
然后，你可以在你的代码中直接引入Lodash：
import _ from 'lodash';
const array = [1, 2, 3, 4, 5];
const reversedArray = _.reverse(array);
console.log(reversedArray);
3. 配置Webpack中的externals
如果你希望在生产环境中使用CDN引入Lodash，而在开发环境中通过npm包管理工具引入，你可以这样配置Webpack：
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
// 其他配置
externals: isProd ? {
lodash: '_'
} : {}
};
这样，在生产环境中，Webpack会将Lodash视为外部依赖，而在开发环境中则会将其打包到bundle.js中。
六、总结
导入外部JS到Webpack中有多种方法，每种方法都有其适用的场景和优缺点。使用externals配置是最常见和有效的方法，特别是在需要减小打包文件体积和提高加载速度时。然而，根据项目的具体需求，你可能需要结合其他方法，如通过script-loader、直接在HTML文件中引入、使用CDN等，以实现最佳效果。
在实际项目中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理和协作开发。这些工具可以帮助团队更高效地管理项目任务、版本控制和代码审查，从而提高开发效率和代码质量。
希望这篇文章能帮助你更好地理解如何在Webpack中导入外部JS，并选择最适合你项目的方法。
相关问答FAQs：
1. 如何在Webpack中导入外部JavaScript文件？
- 问题： 我如何在Webpack中导入外部JavaScript文件？
- 回答： 在Webpack中，可以使用
import语句来导入外部JavaScript文件。首先，确保已经安装了所需的依赖项，例如webpack和babel-loader。然后，在你的Webpack配置文件中配置module.rules，使用babel-loader来处理JavaScript文件。最后，在你的JavaScript代码中使用import语句来导入外部JavaScript文件。
2. 如何在Webpack中导入第三方库？
- 问题： 我如何在Webpack中导入第三方库？
- 回答： 在Webpack中，可以使用
import语句来导入第三方库。首先，确保已经通过npm安装了所需的第三方库。然后，在你的JavaScript代码中使用import语句来导入第三方库。Webpack会自动处理依赖关系并将第三方库打包到你的最终构建文件中。
3. 如何在Webpack中导入外部CDN资源？
- 问题： 我如何在Webpack中导入外部CDN资源？
- 回答： 在Webpack中，可以使用
<script>标签来导入外部CDN资源。首先，找到你想要导入的CDN资源的URL。然后，在你的Webpack配置文件中配置externals，将CDN资源的名称和全局变量关联起来。最后，在你的HTML文件中使用<script>标签来导入CDN资源。Webpack会自动将全局变量与你的代码关联起来，使其可用。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3539911
