Webpack 如何使用 CDN 加载工具库？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用一些工具库来提高开发效率，比如 jQuery、Vue、React 等。而为了方便使用，我们通常会将这些工具库通过 npm 安装到项目中，然后通过 import 或 require 的方式引入使用。但是，有时候我们也会考虑使用 CDN 加载工具库，以减小项目体积、提高页面加载速度等优势。那么，在使用 Webpack 的项目中，如何使用 CDN 加载工具库呢？

使用 externals 配置

Webpack 提供了一个 externals 配置选项，用于告诉 Webpack 哪些模块是外部的，不需要打包进最终的 bundle 中。我们可以将需要使用 CDN 加载的工具库配置为 externals，这样 Webpack 在打包时就不会将这些工具库打包进去，而是在运行时从 CDN 加载。

下面以 jQuery 为例，演示如何使用 externals 配置来实现 CDN 加载：

首先，在 HTML 文件中引入 jQuery 的 CDN：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

在 Webpack 的配置文件中，将 jQuery 配置为 externals：

module.exports = {
  // ...
  externals: {
    jquery: 'jQuery'
  }
};

这里的 externals 配置告诉 Webpack，当遇到 require('jquery') 或 import $ from 'jquery' 时，不需要将其打包进 bundle 中，而是从全局变量 jQuery 中获取。

在代码中使用 jQuery：

import $ from 'jquery';

$(document).ready(function() {
  console.log('jQuery version:', $.fn.jquery);
});

在运行时，Webpack 会从 CDN 加载 jQuery，并将其赋值给全局变量 jQuery。在代码中使用 import $ from 'jquery' 时，Webpack 会将其转换为 window.jQuery。

使用 html-webpack-plugin 插件

除了使用 externals 配置，我们还可以使用 html-webpack-plugin 插件来自动添加 CDN 资源到 HTML 文件中。

安装 html-webpack-plugin：

npm install --save-dev html-webpack-plugin

在 Webpack 的配置文件中，添加 html-webpack-plugin 插件的配置：

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html', // 指定 HTML 模板文件
      cdn: {
        jquery: 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
      }
    })
  ]
};

这里的 cdn 配置指定了需要使用 CDN 加载的工具库及其对应的 CDN 地址。

在 HTML 文件中添加占位符：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack CDN Demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 这里添加占位符 -->
    <%= htmlWebpackPlugin.options.cdn.jquery %>
  </body>
</html>

这里的 <%= htmlWebpackPlugin.options.cdn.jquery %> 是一个占位符，它会在使用 html-webpack-plugin 插件时被替换为 jQuery 的 CDN 地址。

在代码中使用 jQuery：

import $ from 'jquery';

$(document).ready(function() {
  console.log('jQuery version:', $.fn.jquery);
});

在运行时，Webpack 会自动将 jQuery 的 CDN 地址添加到 HTML 文件中，并在代码中使用 import $ from 'jquery' 时，将其转换为 window.jQuery。

总结

使用 CDN 加载工具库可以提高页面加载速度和减小项目体积，而在使用 Webpack 的项目中，我们可以通过 externals 配置或 html-webpack-plugin 插件来实现 CDN 加载。在实际开发中，我们需要根据项目的实际情况来选择合适的方式来使用 CDN 加载工具库。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6550357e7d4982a6eb9177f5