html-webpack-externals-plugin icon indicating copy to clipboard operation
html-webpack-externals-plugin copied to clipboard

Inject external file many times

Open sknightq opened this issue 5 years ago • 5 comments

I have many entries and each entry need to inject an external javascript called aepmod.js (just like a CDN jquery), but I got wrong times of injection in my dist folder. image image

The first file gets one inject. The second one gets two, The third one gets three ..... The last one gets many times (The times depend on the order of my file)! image Following is my webpack production config: image And the path in 'externals' config represents the URL of aepmod.js

sknightq avatar May 14 '19 04:05 sknightq

What's more, everything will be OK if I use my old node_modules. But I found the versions of html-webpack-externals-plugin in two node_modules are same (v3.8.0) The old node_modules is created under node-v8.11.0 The new one is created under node-v8.16.0

sknightq avatar May 14 '19 06:05 sknightq

I used html-webpack-tags-plugin that is depended by html-webpack-externals-plugin to resolve my problem. This plugin should be upgraded.

      new HtmlWebpackTagsPlugin({
        append: false,
        publicPath: false,
        tags: [
          baseConfig.build.corsDomain +
            ':' +
            baseConfig.build.corsMainPort +
            baseConfig.build.externalJs
        ]
      })

sknightq avatar May 21 '19 15:05 sknightq

I have the same problem.

Trendymen avatar Oct 15 '19 11:10 Trendymen

I have the same problem.

@Trendymen You can use html-webpack-tags-html to replace of html-webpack-externals-plugin. This is example.

sknightq avatar Dec 25 '19 03:12 sknightq

I have the same problem.

@Trendymen You can use html-webpack-tags-html to replace of html-webpack-externals-plugin. This is example.

There is still one way to continue to use this plugin, if you want.(I try many times to make it before I see this issue, too sad.)

Create one option array of this plugins in the file which you create multiple entries, each of option specify the html you want to inject.

// util.js
htmlWebpackExternalsPlugins.push(
   new htmlWebpackExternalsPlugin({
       externals: externalsConfig,
       hash: true,
       files: [`${pageName}.html`],
    })
);
export htmlWebpackExternalsPlugins;
// webpack.prod.js
const { htmlWebpackExternalsPlugins } = require('./utils.js')
module.exports = {
    plugins: [
        ....htmlWebpackExternalsPlugins
    ]
}

IMakiMaki avatar May 14 '20 10:05 IMakiMaki