Webpack项目中通过<script>标签引入外部资源的处理方式
2025/3/6
介绍了在Webpack项目中，通过<script>标签引入外部资源的几种常见处理方式，包括直接在HTML中引入、使用externals配置、使用HtmlWebpackPlugin动态注入、动态加载以及使用script-loader或raw-loader等，并说明了每种方式的适用场景。
在 Webpack 项目中，如果你需要通过 <script> 标签引入外部资源（如第三方库或 CDN 资源），通常有以下几种处理方式：
1. 直接在 HTML 文件中引入
你可以在 index.html 文件中直接通过 <script> 标签引入外部资源。这种方式适用于不需要通过 Webpack 处理的资源。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Project</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.example.com/library.js"></script>
<script src="./dist/main.js"></script>
</body>
</html>
2. 使用 externals 配置
如果你希望在 Webpack 打包时排除某些依赖，可以通过 externals 配置来实现。这样，Webpack 不会将这些依赖打包到最终的 bundle 中，而是期望它们在运行时通过 <script> 标签引入。
// webpack.config.js
module.exports = {
// 其他配置...
externals: {
jquery: 'jQuery', // 假设你通过 <script> 标签引入了 jQuery
},
};
在代码中，你可以像往常一样使用 import 或 require，但 Webpack 不会将其打包：
import $ from 'jquery';
$(document).ready(function() {
console.log('jQuery is ready!');
});
3. 使用 HtmlWebpackPlugin 动态注入 <script> 标签
如果你希望在构建时动态注入 <script> 标签，可以使用 HtmlWebpackPlugin 插件。你可以通过配置 HtmlWebpackPlugin 来添加额外的 <script> 标签。
首先，安装 HtmlWebpackPlugin：
npm install --save-dev html-webpack-plugin
然后在 webpack.config.js 中配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 其他配置...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
scriptLoading: 'defer',
inject: 'body',
chunks: ['main'],
// 添加额外的 <script> 标签
scripts: [
'https://cdn.example.com/library.js',
],
}),
],
};
4. 使用 import 或 require 动态加载
如果你希望在代码中动态加载外部资源，可以使用 import() 或 require() 动态加载模块。
import('https://cdn.example.com/library.js').then((module) => {
// 使用加载的模块
module.doSomething();
});
5. 使用 script-loader 或 raw-loader
如果你需要将外部资源作为字符串或脚本直接引入到你的代码中，可以使用 script-loader 或 raw-loader。
首先，安装 script-loader 或 raw-loader：
npm install --save-dev script-loader raw-loader
然后在 Webpack 配置中使用：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: 'script-loader',
},
],
},
};
在代码中，你可以这样引入：
import 'script-loader!https://cdn.example.com/library.js';
总结
- 直接引入：适用于不需要 Webpack 处理的资源。
externals配置：适用于排除某些依赖，期望通过<script>标签引入。HtmlWebpackPlugin：适用于动态注入<script>标签。- 动态加载：适用于在代码中动态加载外部资源。
script-loader或raw-loader：适用于将外部资源作为字符串或脚本直接引入。
根据你的具体需求选择合适的方式处理通过 <script> 标签引入的资源。
标签：面试题
上次更新：