How to include html partials with webpack (version 2) with the html-loader?

Question

I am working hard to include a simple footer.html, as an html partial) via html-loader. I am using webpack version 2.

I failed trying to use ${require('**./footer.html**')} and ${require('**../footer.html**')}.

I am not using ejs loader and I do not use the handlebar plugin.

Does somebody know how I can fix this problem and whether it possible to render partials with webpack.

Thanks for your advice!

What kind of failure do you see? What did you expect to happen instead? — Jesse Hattabaugh, Jun 26 '17 at 22:39
It just printed the ${require('./footer.html')} markup without doing anything. Perhaps it is not possible to render partials with the html-loader, isn't it? If I use the standard loader (might be ejs) than I get an result but this throws an error with the file type .html — Mathias, Jun 27 '17 at 21:10

score 3 · Answer 1 · answered Jul 01 '17 at 10:12

3

I use html-loader and simply add <%= require('html-loader!./partial/header.html') %> to my main index.html. Thats work for me.

answered Jul 01 '17 at 10:12

Serg Bolten

31
1

Unfortunately it does't render the the require state. It just return `<%= require('html-loader!./partial/header.html') %>` – Mathias Jul 04 '17 at 18:58
Do you have "html-loader" and "html-webpack-plugin"? Also you can check my webpack config https://github.com/bolten08/webpack/blob/master/webpack.config.js – Serg Bolten Jul 07 '17 at 09:01
Thanks for the hint. I already have the plugins in the webpack.config. Do I have to create the partial over HtmlWebpackPlugin, too? Here my webpack https://gitlab.com/redsleeve/webpack – Mathias Jul 07 '17 at 11:46

score 1 · Accepted Answer · answered Aug 13 '17 at 17:44

1

The feature is called interpolation. Here { test: /\.html$/, use: ['html-loader?interpolate'] }, is a webpack configuration rule that leverages it by specifying the interpolate flag.

answered Aug 13 '17 at 17:44

Felicio

448
5
11

Thanks a lot! This solution works fine now. Can now simple load Partials with ${require('./snippets/footer.html')} Great advice! – Mathias Jul 10 '18 at 20:47
How do you include css or scss for that partial file only? – Ardeus Feb 26 '19 at 08:17

score 0 · Answer 3 · answered Aug 04 '17 at 16:12

In Webpack.config file you can add main html like below

   plugins: [ 
    new HtmlWebpackPlugin({
        template: 'index.html'
    }),
    new ExtractTextPlugin('bundle.css')
],

Include html-loader in package.json and use the below method in config block alone is enough.

  $stateProvider.state('app', {
            url: '/app',
            template: require('html-loader!root/app/Common/templates/role.html'),
            controller: 'roleController'
        })

So all the partials will be bundled within the bundle.js itself.No need to add the loaders in webpack-config as well

Sidharth Ravi · Answer 4 · 2017-11-21T08:43:12.947

0

I tested with you webpack.config.js file. All you have to do is to remove the following from it:

{
    test: /\.html$/,
    use: ['html-loader']
},

So that the fallback lodash loader comes into play.

edited Nov 21 '17 at 08:43

answered Nov 16 '17 at 21:36

Sidharth Ravi

1
3

How to include html partials with webpack (version 2) with the html-loader?

4 Answers4

Linked