How to include html partials with webpack (version

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!

Answer 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.

Answer 2

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

Answer 3

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

Answer 4

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.