Altering css-files array while accessing it changes accessed indexes

[sittingbool]

Line 150 (current version):

//make sure that the order of lib css before the css of module for( i = 0, len = extractedCss.length; i < len; i++ ){ extractedCss[i] = Object.assign({}, pluginArgs.head.splice(extractedCss[i], 1)[0]); // <<< this Line } pluginArgs.head = extractedCss.concat( pluginArgs.head ); callback();

This will alter the indexes of the pluginArgs.head array while you try to access the indexes in that order which results in accessing the wrong and also empty indexes. This caused my html to have an empty tag and the last two css files have been added to the body instead of the head-section.

[norangit]

please comment your version of html-webpack-plugin, show your webpack.config file if you can

[sittingbool]

Why is this relevant? I already provided a fix. And it is independent from other libraries or configurations because the bug is simply a logical error.

[norangit]

Hi, I need to test , and need your content of webpack.config file...

[mmiller42]

I don't advise people to use this plugin, personally. I developed it with the intention of having it keep my code clean, but it's buggy in too many edge cases. I'm finding that it's better (if more verbose), to use a combination of externals, HtmlWebpackPlugin, HtmlWebpackIncludeAssetsPlugin, and CopyWebpackPlugin, like so:

  plugins: [
    // Use CopyWebpackPlugin to copy dist files to your outputPath
    new CopyWebpackPlugin([
      { from: 'node_modules/react/dist/react.js', to: 'vendor/js/' },
      { from: 'node_modules/react-dom/dist/react-dom.js', to: 'vendor/js/' },
      { from: 'node_modules/redux/dist/redux.js', to: 'vendor/js/' },
      { from: 'node_modules/semantic-ui-css/semantic.css', to: 'vendor/css/' },
      // Required assets of your dependencies (such as fonts and images) can be copied too
      { from: 'node_modules/semantic-ui-css/themes/', to: 'vendor/css/themes/' }
    ]),
    // Use HtmlWebpackAssetsPlugin to add asset script/link tags to HTML output
    new HtmlWebpackIncludeAssetsPlugin({
      // List of JS and CSS paths (relative to outputPath) to load
      assets: [
        'vendor/js/react.js',
        'vendor/js/react-dom.js',
        'vendor/js/redux.js',
        'vendor/css/semantic.css'
      ],
      // Insert these assets before the bundle file(s)
      append: false,
      // Add hash to end of filename so that if your dependencies update, cache will refresh
      hash: true
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      hash: true
    })
  ],
  // Specify the dependencies to exclude from the bundle since the dist files are being used
  // keys are the module names, values are the globals exported by the dist files
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    redux: 'Redux'
  }

While it's a little more redundant, it's more reliable and generally more configurable.

If I end up rewriting this plugin at some point, it will probably just provide an abstraction layer over these other plugins.