对不在node_modules中的文件使用html-webpack-externals plugin

是指在使用Webpack构建项目时，通过html-webpack-externals plugin插件来将不在node_modules中的文件排除在外，不打包进最终的输出文件中。

html-webpack-externals plugin是一个Webpack插件，它可以将指定的外部资源（如CDN链接）引入到HTML文件中，而不是将其打包进最终的输出文件中。这样可以减小打包文件的体积，提高页面加载速度。

使用html-webpack-externals plugin的步骤如下：

1. 首先，安装html-webpack-externals plugin插件：

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

1. 在Webpack配置文件中引入插件：

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

1. 在plugins配置中添加插件实例：

plugins: [
  new HtmlWebpackExternalsPlugin({
    externals: [
      {
        module: 'jquery',
        entry: 'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js',
        global: 'jQuery',
      },
      // 可以添加更多的外部资源
    ],
  }),
],

在上述配置中，我们通过externals选项指定了要引入的外部资源。每个外部资源都是一个对象，包含以下属性：

• module: 外部资源的模块名，可以是一个npm包名或自定义的模块名。
• entry: 外部资源的入口文件，可以是一个本地文件路径或CDN链接。
• global: 外部资源的全局变量名，如果该资源是一个全局变量，则需要指定该属性。

通过以上配置，Webpack在构建过程中会将指定的外部资源引入到HTML文件中，而不会将其打包进最终的输出文件中。

html-webpack-externals plugin的优势在于：

• 减小打包文件体积，提高页面加载速度。
• 可以使用CDN链接引入常用的第三方库，减少服务器压力。
• 可以灵活地配置外部资源，满足不同项目的需求。

html-webpack-externals plugin的应用场景包括：

• 在使用Webpack构建项目时，需要引入一些外部资源，如CDN链接的第三方库。
• 需要优化页面加载速度，减小打包文件体积。

腾讯云提供了一系列与云计算相关的产品，其中包括CDN加速、对象存储、云服务器等。具体推荐的腾讯云产品和产品介绍链接地址可以参考腾讯云官方文档或咨询腾讯云的客服人员。