Inline css twice in Vue-CLI 3 with html-webpack-inline-source-plugin

Expected behavior

Size of my css file is 13.8kb, html is 2.8kb. So I wanna that my css file can be inlined with html-webpack-inline-source-plugin.

Current behavior

The size of my html file increased to 30.4kb And I found that my css file was inlined twice.

Config

Adding this plugin by webpack-chain API

// vue.config.js
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
module.exports = {
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].inlineSource = '.css$'
            return args
        }
        config.plugin('inline').use(HtmlWebpackInlineSourcePlugin)
    }
}

When I inspecting my project’s webpack config vue inspect > output.js

// output.js
/* config.plugin('html') */
new HtmlWebpackPlugin(
  {
    templateParameters: function () { /* omitted long function */ },
    template: '/Users/logan/tencent/qgact/src/index.html',
    filename: 'index.html',
    inlineSource: '.css$'
  }
),
/* config.plugin('inline') */
new HtmlWebpackInlineSourcePlugin()

Enviroment

Node.js 10.9.0
@vue/cli-service 3.0.0
webpack 4.15.1
html-webpack-plugin 3.2.0
html-webpack-inline-source-plugin 0.0.10

[logan70]

I am experiencing the same issue. Using vue-cli and this plugin, both my JS and CSS are being inlined twice.

Vue-cli 3 would use @vue/preload-webpack-plugin to auto add preload link tag to your html like this

<link href=js/app.js rel=preload as=script>

<link href=css/app.css rel=preload as=style>,

you can modify this plugin’s config in vue.config.js(if you don’t have this file, create it in your project’s root folder)

module.exports = {
  chainWebpack: config => {
    config.plugin('preload')
      .tap(args => {
        args[0].fileBlacklist.push(/\.css/, /app\.js/)
        return args
      })
    config.plugin('inline-source')
      .use(require('html-webpack-inline-source-plugin'))
    config
      .plugin('html')
      .tap(args => {
        args[0].inlineSource = '(\.css|app\.js$)'
        return args
      })
  }
}

If it works, let me know.

[imaxing]

how you have since resolved this issue? 😃