Webpack can't resolve html-loader

Question

I am converting a project using requirejs to webpack and having trouble with the "html-loader" loader.

package.json:

"html-loader": "^0.3.0",
"webpack": "^1.11.0",
"webpack-dev-server": "^1.10.1"

app/js/webpack.config.js:

  // folder structure:
  // root
  //   app/js
  //   bower_components/
  //   dist/
  //   node_modules/

  entry: './app/js/main.js',
  output: {
    path: 'dist/js/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      // Note, via requirejs's "text" plugin, I included templates
      // like this: var tpl = require('text!sample.html');
      // For webpack, I went through the codebase and cleaned up
      // every instance of "text!".
      {test: /\.html$/, loader: 'html'}
    ]
  },
  resolve: {
    root: ['app/js', 'bower_components'],
    alias: {
      ...
    }
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
        'bower.json', ['main']
      )
    )
  ]

When I run webpack -- webpack --config app/js/webpack.config.js -- I get the following error message:

ERROR in app/js/some/file.js
Module not found: Error: Cannot resolve module 'html' in app/js/some/file.js

I tried the following, which didn't work:

  resolveLoader: {
    root: [path.join(__dirname, 'node_modules')],
  },

Also tried moving "webpack.config.js" to the project root. That didn't help either.

And, even tried using the "raw-loader" loader, which also resulted in the same "Cannot resolve module 'raw'" error.

Any help would be appreciated. Thanks.

Answer 1

Totally dropped the ball on updating this.

1) I should have been using text-loader, which allows me to leave in place every require('text!some/template.html');.

2) My root path was not absolute. Per the manual, "It must be an absolute path! Don’t pass something like ./app/modules."

3) If your requires look like require('text!some/file.html'), then you are done. Defining the loader in webpack.config.js is redundant. If you do, your templates will end up looking like module.exports="module.exports=\"...\"".

Updated config:

entry: './app/js/main.js',
output: {
    path: 'dist/js/',
    filename: 'bundle.js',
},
module: {
    loaders: [/*nothing*/]
},
resolve: {
    root: [
        path.resolve('app/js'), 
        path.resolve('bower_components')
    ],
    alias: {
        ...
    }
},
plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
            'bower.json', ['main']
        )
    )
]