Search code examples
angularwebpackhtml-webpack-plugin

How html bundling work with $.component.html files into angular 2 huge application?


I am new with angular 2 and webpack and have a basic conceptual knowledge about it. i am working in a project where I have 100's of html files. I am unable to understand how does webpack will bundle html files ? I have html files with it's respective components. So following are the questions, running in my mind :-

  1. Is webpack bundle html files with js files ?, if it does so how ?
  2. If it will simply copy all the static files along their respective path and folder into the output folder?, if it does so how ?

Solution

  • For both question answer is::

    Webpack bundle html files content into js file itself.....

    Let say:

    @Component({
        selector : 'bug-edit',
        templateUrl : require('./bug-edit')
    })
    

    So when webpack transform this to es2015 it will become

    template: "<b>All content in html file</b>"
    

    So in short webpack bundle js and html in one file...associate to url...