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

admin管理员组

文章数量:1302930

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!

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!

• javascript
• webpack
• include
• require
• partials

Share Improve this question Follow edited Mar 25, 2018 at 19:10 krl 5,29644 gold badges4040 silver badges5454 bronze badges asked Jun 26, 2017 at 20:42 MathiasMathias 4311 silver badge33 bronze badges 4

• 1 What kind of failure do you see? What did you expect to happen instead? – Jesse Hattabaugh Commented Jun 26, 2017 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 Commented Jun 27, 2017 at 21:10
• What does "printed" mean? Printed where? – Jesse Hattabaugh Commented Jun 28, 2017 at 22:13
• @Mathias, did you find a solution for your problem? – Alex Commented Mar 10, 2018 at 21:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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.

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 es into play.

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

本文标签： javascriptHow to include html partials with webpack (version 2) with the htmlloaderStack Overflow