Use html-webpack-externals-plugin for files not in node_modules

Question

does anyone know if there's a way to make this plug-in (https://github.com/mmiller42/html-webpack-externals-plugin) work for my own files, that are not in node_modules?

For example: I have some configuration data files in app/js/config/ I want these files to be excluded from all bundles, copied to the output (dist) folder and read from there at runtime, which is exactly what this plug-in does, but for files in node_modules.

I managed to get it to copy a test file and insert the script tag in index.html, but the contents of the test.js file is still bundled and read from there. Here's my experimental config:

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

Any help will be greatly appreciated!

Answer 1

I meet the same issue. When I use the plugin html-webpack-externals-plugin, it always find the library in node_modules folder. And I know it has deprecated from this link.

Fortunately, it recommends a new library html-webpack-tags-plugin which could resolve this issue perfectly. The following is my key configuration.

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,
    }),
  ],