Conflict with webpack-html-plugin

Using this loader with webpack-html-plugin leads to this error:

ERROR in   Error: Child compilation failed:
template syntax error Templates should only be responsible for mapping the state to the UI. Avoid placing tags with
 side-effects in your templates, such as <script>, as they will not be parsed.:
template syntax error Templates should only be responsible for mapping the state to the UI. Avoid placing tags with
 side-effects in your templates, such as <script>, as they will not be parsed.

- compiler.js:76
  [ProjectName]/[html-webpack-plugin]/lib/compiler.js:76:16

- Compiler.js:282 Compiler.<anonymous>
  [ProjectName]/[webpack]/lib/Compiler.js:282:10

- Compiler.js:479
  [ProjectName]/[webpack]/lib/Compiler.js:479:13

- Tapable.js:102 next
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:102:11

- CachePlugin.js:61 Compiler.<anonymous>
  [ProjectName]/[webpack]/lib/CachePlugin.js:61:4

- Tapable.js:106 Compiler.applyPluginsAsyncSeries
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:106:13

- Compiler.js:476
  [ProjectName]/[webpack]/lib/Compiler.js:476:10

- Tapable.js:95 Compilation.applyPluginsAsyncSeries
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46

- Compilation.js:625
  [ProjectName]/[webpack]/lib/Compilation.js:625:18

- Tapable.js:95 Compilation.applyPluginsAsyncSeries
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46

- Compilation.js:616
  [ProjectName]/[webpack]/lib/Compilation.js:616:10

- Tapable.js:95 Compilation.applyPluginsAsyncSeries
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46

- Compilation.js:611
  [ProjectName]/[webpack]/lib/Compilation.js:611:9

- Tapable.js:95 Compilation.applyPluginsAsyncSeries
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46

- Compilation.js:607 sealPart2
  [ProjectName]/[webpack]/lib/Compilation.js:607:8

- Tapable.js:95 Compilation.applyPluginsAsyncSeries
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46

- From previous event:

- compiler.js:69 Object.compileTemplate
  [ProjectName]/[html-webpack-plugin]/lib/compiler.js:69:10

- index.js:47 Compiler.<anonymous>
  [ProjectName]/[html-webpack-plugin]/index.js:47:40

- Tapable.js:193 Compiler.applyPluginsParallel
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:193:14

- Compiler.js:468
  [ProjectName]/[webpack]/lib/Compiler.js:468:8

- Tapable.js:95 Compiler.applyPluginsAsyncSeries
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46

- Compiler.js:461 Compiler.compile
  [ProjectName]/[webpack]/lib/Compiler.js:461:7

- Compiler.js:47
  [ProjectName]/[webpack]/lib/Compiler.js:47:17

- Tapable.js:102 next
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:102:11

- Shared.js:138 Compiler.compilerInvalid
  [ProjectName]/[webpack-dev-middleware]/lib/Shared.js:138:5

- Tapable.js:104 next
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:104:14

- CachePlugin.js:31 Compiler.<anonymous>
  [ProjectName]/[webpack]/lib/CachePlugin.js:31:4

- Tapable.js:106 Compiler.applyPluginsAsyncSeries
  [ProjectName]/[webpack]/[tapable]/lib/Tapable.js:106:13

- Compiler.js:45 Watching._go
  [ProjectName]/[webpack]/lib/Compiler.js:45:16

- Compiler.js:36 Watching.<anonymous>
  [ProjectName]/[webpack]/lib/Compiler.js:36:8

- Compiler.js:371 Compiler.readRecords
  [ProjectName]/[webpack]/lib/Compiler.js:371:10

- Compiler.js:33 new Watching
  [ProjectName]/[webpack]/lib/Compiler.js:33:16

- Compiler.js:205 Compiler.watch
  [ProjectName]/[webpack]/lib/Compiler.js:205:17

- Shared.js:153 Object.startWatch
  [ProjectName]/[webpack-dev-middleware]/lib/Shared.js:153:29

- Shared.js:215 Shared
  [ProjectName]/[webpack-dev-middleware]/lib/Shared.js:215:8

The fix is easy, just tell webpack and vue-template-loader to include only files from source directory or to exclude index.hml if it is in src as well:

{
  test: /\.html$/,
  include: [
    path.resolve('src')
  ],
  loader: 'vue-template-loader' 
}

Maybe it’s worth to mention about this in the readme?

[ktsn]

Thanks for the further information and the reproduction. But as this behavior seems to be expected on html-webpack-plugin and it is already noted on the readme, I think it is not related to this loader.

[sqal]

hmm I don’t think so, I didn’t use html-loader at all