lifenautjoe/webpack-starter-basic

Can't include the one HTML template inside another one.

andreySadomovskiy opened this issue · 2 comments

andreySadomovskiy commented

Hello.

I am on the way of learning WebPack and use your example like a start point.
Could you help, please, with the issue?

I have such a file structure:

image

and want to include navigation.html inside header.html

I have the Index.html :

....
<!DOCTYPE html>
<html>
  <%= _.template(require('./../includes/layout/head.html').default)(data) %>
  <body data-spy="scroll" data-target="#subNavigation" data-offset="200">

    <%= _.template(require('./../includes/layout/header.html').default)(data) %>
    <%= _.template(require('./../includes/components/intro.html').default)(data) %>

    <div class="container">Index Page</div>

    <%= _.template(require('./../includes/layout/footer.html').default)(data) %>
    <script src="js/bundle.js"></script>
  </body>
</html>

and the header.html:

<header id="header">
  <img src="img/logo.svg" id="logo" />
  <%= _.template(require('./../includes/components/navigation.html').default)(data) %>
</header>

But as a result, I have an error:

Html Webpack Plugin:
  Error: Cannot find module './../includes/components/navigation.html'
  
  - module.js:11 require
    internal/module.js:11:18
  
  - lodash.templateSources[1]:9 eval
    lodash.templateSources[1]:9:22
  
  - index.html:108 
    D:/Projects/TestProject/markup/src/html/views/index.html:108:132
  
  - index.html:115 ./node_modules/html-webpack-plugin/lib/loader.js!./src/html/views/index.html.module.exports
    D:/Projects/TestProject/markup/src/html/views/index.html:115:3
  
  - index.js:284 Promise.resolve.then
    [markup]/[html-webpack-plugin]/index.js:284:18
  
  - next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7

It would be great if you can push me on the right way.

lifenautjoe commented

Hmmm this starter pack does not have an html file loader.

Please try installing https://github.com/webpack-contrib/html-loader .

andreySadomovskiy commented

Shouldn't row-loader do this?

{
        test: /\.html$/,
        include: path.resolve(__dirname, "src/html/includes"),
        use: ["raw-loader"]
      }