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

【问题标题】：Use html-webpack-externals-plugin for files not in node_modules对不在 node_modules 中的文件使用 html-webpack-externals-plugin
【发布时间】：2019-02-04 12:11:52
【问题描述】：

有谁知道是否有办法让这个插件 (https://github.com/mmiller42/html-webpack-externals-plugin) 为我自己的文件工作，这些文件不在 node_modules 中？

例如：我在 app/js/config/ 中有一些配置数据文件我希望将这些文件从所有包中排除，复制到输出（dist）文件夹并在运行时从那里读取，这正是这个插件所做的，但对于 node_modules 中的文件。

我设法让它复制一个测试文件并在 index.html 中插入脚本标签，但 test.js 文件的内容仍然被捆绑并从那里读取。这是我的实验配置：

new HtmlWebpackExternalsPlugin({
  externals: [
    {
      module: 'test',
      entry: '../../js/config/test.js',
      global: 'test',
    },
  ],
})

任何帮助将不胜感激！

【问题讨论】：

你解决了吗？
老实说不记得了，抱歉
我终于用 CopyWebpackPlugin 和 HtmlWebpackTagsPlugin 解决了。 [new CopyWebpackPlugin([{ from: "./src/Config.js", to: "." }]),new HtmlWebpackTagsPlugin({tags: [{ path: "Config", type: "js" }],append : false})]
干得好，如果你有信心，也许把它作为答案发布给其他人

标签： webpack webpack-externals

【解决方案1】：

我遇到了同样的问题。当我使用插件html-webpack-externals-plugin 时，它总是在node_modules 文件夹中找到库。而且我知道它已被 this link 弃用。

幸运的是，它推荐了一个新的库html-webpack-tags-plugin，它可以完美地解决这个问题。以下是我的关键配置。

plugins: [
    new CopyWebpackPlugin([
      { from: "./src/Config.js", to: "." },
    ]),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/index.html"),
    }),
    new HtmlWebpackTagsPlugin({
      tags: [{ path: "Config.js", type: "js" }],
      append: false,
    }),
  ],

【讨论】：