jamesjieye / html-webpack-exclude-assets-plugin Goto Github PK

The code is fine ~ the plugin works as announced.. however it could be nice if it could somehow remove the files from being written in disk.. or maybe (a dirty way) would be remove it after it has been created... so you don't end up with a .css and .js file in the directory....

I'm using CRA, but in my config I have the following:

      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            excludeAssets: [/background.*.js/]
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),
      new HtmlWebpackExcludeAssetsPlugin(),

When I try to build, I get this.htmlWebpackPlugin.getHooks is not a function

In my package.json I have

  "devDependencies": {
    "html-webpack-exclude-assets-plugin": "0.0.7",
    "html-webpack-plugin": "^3.2.0",
  }

Hi,

I'm using the style-ext-html-webpack-plugin in addition to the html-webpack-exclude-plugin. The style-ext-html-webpack-plugin is executed before the exclude plugin and generates a <script> tag without any attributes. This breaks the exclude plugin when used together.

Html Webpack Plugin:
<pre>
  TypeError: Cannot read property 'src' of undefined
  
  - index.js:47 
    [src]/[html-webpack-exclude-assets-plugin]/index.js:47:57
  
  - Array.forEach
  
  - index.js:46 HtmlWebpackExcludeAssetsPlugin.processAssets
    [src]/[html-webpack-exclude-assets-plugin]/index.js:46:19
  
  - index.js:29 Compilation.<anonymous>
    [src]/[html-webpack-exclude-assets-plugin]/index.js:29:25
  

The forEach in question should probably short-circuit on the tag having any attributes at all:

  pluginData.head.forEach(function (tag) {
    if (!tag.attributes || !self.isExcluded(excludePatterns, tag.attributes.src || tag.attributes.href)) {
      head.push(tag);
    }
  });

Hello and thank you for the useful plugin.
Today, Webpack updated to v.4 (with webpack-contrib/html-webpack-plugin) and this plugin now makes an error:

ERROR in   TypeError: callback is not a function

  - index.js:30   [html-webpack-exclude-assets-plugin]/index.js:30:7
  - new Promise
  - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
    [html-webpack-plugin]/[tapable]/lib/Hook.js:35:21
  - index.js:679 [html-webpack-plugin]/index.js:679:45
  - index.js:170  [html-webpack-plugin]/index.js:170:16
  - util.js:16 tryCatcher  [bluebird]/js/release/util.js:16:23
  - promise.js:512 Promise._settlePromiseFromHandler   [bluebird]/js/release/promise.js:512:31
  - promise.js:569 Promise._settlePromise   [bluebird]/js/release/promise.js:569:18
  - promise.js:614 Promise._settlePromise0   [bluebird]/js/release/promise.js:614:10
  - promise.js:693 Promise._settlePromises   [bluebird]/js/release/promise.js:693:18
  - async.js:133 Async._drainQueue  [bluebird]/js/release/async.js:133:16
  - async.js:143 Async._drainQueues  [bluebird]/js/release/async.js:143:10
  - async.js:17 Immediate.Async.drainQueues   [bluebird]/js/release/async.js:17:14

Hello, I upgraded webpack to v5, use this plug-in but find some errors.

HtmlWebpackExcludeAssetsPluginError: The expected HtmlWebpackPlugin hook was not found! Ensure HtmlWebpackPlugin is installed and was initialized before this plugin.

It seems that hook has been deleted after webpack5 upgrade，are there plans to update this plug-in to support webpack 5

This plugin works fine if you use inject=true for html-webpack-plugin, but it doesn't work great if you want to do anything custom yourself. Here's the most simple example:

<html>
<head>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app">
</div>
</body><%
for (var idx in htmlWebpackPlugin.files.js) { %>
    <script src="<%= htmlWebpackPlugin.files.js[idx] %>"></script><%
} %>
</html>

The files js (or you could use ...files.chunks here) still contain all assets, even ones that are excluded on body. Is this truly desired behavior or are there some problems with actually filtering out chunks too?

It's a pretty simple fix and i'll submit a pull request if you think this is desired behavior.

This is a great little plugin, but since it only filters on the src attribute, it misses css includes which are <link> and use href. Support for this would be awesome. Thanks.

It seems that the hooks api of htmlWebpackPlugin changed.

Currently, this plugin throws an error:
Error: The expected HtmlWebpackPlugin hook was not found! Ensure HtmlWebpackPlugin is installed and was initialized before this plugin.

This is the case, because the plugin checks against
if (!compilation.hooks.htmlWebpackPluginAlterAssetTags) {

checking the hooks that htmlWebpackPlugin provides:
https://github.com/jantimon/html-webpack-plugin#events

such a hook is not offered and therefore not available.

However, changing to what seems to be the closest candidate: alterAssetTagGroups also dow not work.

It seems there is a drop-in-replacement for this plugin, https://github.com/swimmadude66/html-webpack-skip-assets-plugin, but it would be great anyway, if there was a chance to update this plugin or mark it as deprecated with a note up to which version of htmlWebpackPlugin this was working.

Thank you!

I what exclude bundle.js from this fragment

    <script src="bundle.js"></script>
<script type="text/javascript" src="bundle.js?5fc2c71bd09ffa7a3df9"></script>

this seems not working

    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            template: './static/index.html',
            excludeAssets: [/bundle.js[^?]/]
        }),
        new HtmlWebpackExcludeAssetsPlugin(),
    ],

How can I do this ?

error with html-webpack-plugin version >= 4.0.0-alpha.1

The expected HtmlWebpackPlugin hook was not found! Ensure HtmlWebpackPlugin is installed and was initialized before this plugin

downgrade to 4.0.0-alpha works

Assets are not excluded from <%= htmlWebpackPlugin.files.css %>.

The second example has a copy paste error - should probably be HtmlWebpackExcludeAssetsPlugin instead of HtmlWebpackInlineSourcePlugin

Hi,

I use this plugin and works fine. But I want to inject my stylesheet dynoamically via javascript on run. But the import return nothing. Any idea how to fix this ?

import myStyle from './style/theme.css';
import myStyle2 from './style/theme-2.css';

myStyle == {};
myStyle2 == {};

// In my app
document.getElementsByTagName('head')[0].appenChild('<link src="'+myStyle+'" />'); // This cannot works

// Configuration in HtmlWebpackPlugin :
{
    excludeAssets: /theme.*\.css$/
}

Thank you

After jantimon/html-webpack-plugin@4e29b02 and jantimon/html-webpack-plugin@bac1cd4 were introduced, the plugin started to give errors for callbacks used without results.

Example:

This is not an important issue, but the warnings started to clutter my output with multiple instances of HtmlWebpackPlugin. @jamesjieye Could you please look at the opened PR?

Upgrading to HtmlWebpackPlugin 4.0.4 makes HtmlWebpackExcludeAssetdPlugin stop to work

Running on:

• Ubuntu v18.04.4
• Node v10.15.3
• Webpack v4.42.1

This is the stack output

Error: The expected HtmlWebpackPlugin hook was not found! Ensure HtmlWebpackPlugin is installed and was initialized before this plugin. at HtmlWebpackExcludeAssetsPlugin.applyCompilation (/home/jseto/programing-projects/web/wish-to-go/node_modules/html-webpack-exclude-assets-plugin/index.js:25:13) at SyncHook.eval [as call] (eval at create (/home/jseto/programing-projects/web/wish-to-go/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1) at SyncHook.lazyCompileHook (/home/jseto/programing-projects/web/wish-to-go/node_modules/tapable/lib/Hook.js:154:20) at Compiler.newCompilation (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Compiler.js:631:26) at hooks.beforeCompile.callAsync.err (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Compiler.js:667:29) at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/jseto/programing-projects/web/wish-to-go/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (/home/jseto/programing-projects/web/wish-to-go/node_modules/tapable/lib/Hook.js:154:20) at Compiler.compile (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Compiler.js:662:28) at compiler.hooks.watchRun.callAsync.err (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Watching.js:77:18) at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/jseto/programing-projects/web/wish-to-go/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1) at AsyncSeriesHook.lazyCompileHook (/home/jseto/programing-projects/web/wish-to-go/node_modules/tapable/lib/Hook.js:154:20) at Watching._go (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Watching.js:41:32) at Watching.compiler.readRecords.err (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Watching.js:33:9) at Compiler.readRecords (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Compiler.js:529:11) at new Watching (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Watching.js:30:17) at Compiler.watch (/home/jseto/programing-projects/web/wish-to-go/node_modules/webpack/lib/Compiler.js:244:10)