Webpack kann html-loader nicht auflösen

Question

Ich konvertiere ein Projekt mit requirs zu webpack und habe Probleme mit dem Loader "html-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'] 
    ) 
    ) 
    ] 

Wenn ich laufen webpack - webpack --config app/js/webpack.config.js - bekomme ich folgende Fehlermeldung:

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

Ich versuchte Folgendes, was nicht funktioniert:

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

Auch versucht, "webpack.config.js" in den Projektstamm zu verschieben. Das hat auch nicht geholfen.

Und sogar versucht, mit dem "raw-loader" -Loader, die auch in dem gleichen "Kann nicht das Modul 'rohe'" Fehler zu lösen.

Jede Hilfe wäre willkommen. Vielen Dank.

Answer 1

Total fiel der Ball auf die Aktualisierung dieser.

1) Ich hätte text-loader verwenden sollen, was mir erlaubt, alle require('text!some/template.html'); an Ort und Stelle zu verlassen.

2) Mein Stammpfad war not absolute. Laut Handbuch: "Es muss ein absoluter Pfad sein! Übergeben Sie nicht etwas wie ./app/modules."

3) Wenn Ihre require s wie require('text!some/file.html') aussehen, dann sind Sie fertig. Das Definieren des Loaders in webpack.config.js ist redundant. Wenn Sie dies tun, werden Ihre Vorlagen am Ende wie module.exports="module.exports=\"...\"" aussehen.

Config aktualisiert:

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'] 
     ) 
    ) 
]