Search code examples
javascriptwebpackwebpack-2

How to require html files Webpack 2

Currently using:

  • "webpack": "^2.4.1"
  • "angular": "^1.6.3"

Current usage that gives the error that I need an appropriate loader:

var root = {
  template: require('./root.html')
};

{
  test: /\*.html$/,
  use: 'raw-loader!html-minifier-loader',
  exclude: /node_modules/
}

But if I do either of the followings it loads fine:

var root = {
  templateUrl: './root.html'
};

var root = {
  template: require('raw-loader!./root.html')
};

Do I have to specifically use the loader in-line if I want to require the HTML file? I thought that's what the loader in webpack config was for unless I'm not aware of this change for Webpack 2.

Solution

  • Your test condition is incorrect. It would only match if a file name literally contained a *, for example:

    root*.html
root*ahtml
root*bhtml

    You want

    /\.html$/

    instead. It's a regular expression, not a glob pattern.