link tag from HTML is not removed

[tahnik]

This maybe a more of a question then a bug. I have this:

const externalCSS = new ExtractTextPlugin({
  filename: 'main_external.css'
});

const internalCSS = new ExtractTextPlugin({
  filename: 'main_internal.css'
})

// other codes...

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
}),
new HtmlWebpackPlugin({
  template: path.join(__dirname, '../views/main.ejs'),
  filename: path.join(__dirname, '../public/main.html'),
}),
externalCSS,
internalCSS,
new StyleExtHtmlWebpackPlugin('main_external.css'),
new CopyWebpackPlugin([{
  from: path.join(__dirname, '../app/main/src/resources'),
  to: path.join(__dirname, '../public/res/')
}]

As far as I understand, once converting the link to style, it should remove the relevant link tag. But it is not doing that. It is still keeping the link that. It is not creating any main_external.css in the build folder.

[jrencz]

I also experienced this issue.

I'm using webpack 1.14.0 and extract-text-webpack-plugin 1.0.1 (meant for webpack1). @tahnik what versions do you use?

[jrencz]

@tahnik how do you configure loader?

My (partial) config is:

{
  plugins: [
    new HtmlWebpackPlugin(),
    // This separates codebase into vendor.[hash].(css|js) and app.[hash].(css|js)
    // Later I'd like to inline only vendor.[hash].css (for testing right now, later I'll try
    // to find a way to create a subset of both I need inlined but that's not the point
    // of this report. I just want to make it clear why I mention vendor.[hash].css in
    // StyleExtHtmlWebpackPlugin cssRegExp below)
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks(module) {
        return module.resource && module.resource.startsWith(
          path.resolve(__dirname, 'node_modules')
        );
      },
    }),
    new StyleExtHtmlWebpackPlugin({
      cssRegExp: /vendor\.[0-9a-f]+\.css/,
      position: 'head-bottom',
    }),
  ],
  module: {
    loaders: [
      {
        test: /\.(scss|sass)$/,
        loader: ExtractTextPlugin.extract("style-loader", ['css-loader', 'postcss-loader', 'sass-loader'])
      },
    ],
  },
}

This config makes vendor.[hash].css file contents inlined (as expected) and the file itself is not created (as expected) BUT the tag stays.

It came to my mind that at least I use the plugin in a way it's not intended to be used: I try to inline a chunk that has already been injected as <link> tag into the html document using position setting other than 'plugin' - the default which replaces the tag.

Although by doing this analysis I managed to solve my own case it seem to be different than what @tahnik describes. Nevertheless it's not emphasised enough in the documentation that tag will only be replaced if position is left to 'plugin' IMO.

[tahnik]

@jrencz I am using Webpack 2.4.1 and style-ext-html-webpack-plugin 3.4.1

By the way, you can try removing style loader from your loader to see if it makes any difference.

[jrencz]

Style loader will be required in my case since I want one of chunks to be represented as yet I wouldn't like to create 2 distinct loader configurations

[liubin595338764]

I also have this problem.
How to solve?

[xamgore]

Same issue here. Here is my webpack config. I just inline all CSS into the single html file.

@numical do you have any ideas what is the reason for such behaviour? I am not a pro webpack user, but want to try to fix the issue.

[zzsanduo]

I have met same issues. @jrencz did you already fix that?

[jrencz]

@zzsanduo nope. I gave up and I decided to go back to that when I'll have some Webpack config maintenance planned

[brettstack]

@numical any advice on how to remove the <link> so we don't double up on the styles?

[ballwood]

Hi,

Looked at this today at work. Seems the issue is to do with the file path searched for. HtmlWebpackPlugin appends the public path to the asset url (e.g. ../../../) in the src when including but StyleExtWebpackPlugin doesn't use this when searching for the link tag the second time, this is why its not replaced only added.

[ballwood]

Additional comments:

Line 15 of replaceTag.js in this plugin uses compilation.outputOptions.publicPath whereas line 394 in index.js of HtmlWebpackPlugin uses

var publicPath = typeof compilation.options.output.publicPath !== 'undefined'
// If a hard coded public path exists use it
? compilation.mainTemplate.getPublicPath({hash: compilationHash})
// If no public path was set get a relative url path
: path.relative(path.resolve(compilation.options.output.path, path.dirname(self.childCompilationOutputName)), compilation.options.output.path)
.split(path.sep).join('/');

@numical

[numical]

Fixed in v3.4.2 thanks to @ballwood