Webpack не может решить html-loader

Question

Я конвертирую проект с помощью requirejs в webpack и испытываю проблемы с загрузчиком «html-loader».

package.json:

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

приложение/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'] 
    ) 
    ) 
    ] 

Когда я бегу WebPack - webpack --config app/js/webpack.config.js - я получаю следующее сообщение об ошибке:

Я пробовал следующее, что не помогло:

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

Также попробовал переместить «webpack.config.js» в корень проекта. Это тоже не помогло.

И даже попробовал использовать загрузчик «raw-loader», что также привело к тому же «Не удалось разрешить ошибку модуля».

Любая помощь будет оценена по достоинству. Благодарю.

Answer 1

Полностью опустил мяч при обновлении.

1) Я должен был использовать text-loader, что позволяет мне оставить на месте каждые require('text!some/template.html');.

2) Мой путь к корню был not absolute. В руководстве: «Это должен быть абсолютный путь! Не пропускайте что-то вроде ./app/modules».

3) Если ваш require s похож на require('text!some/file.html'), то все готово. Определение загрузчика в webpack.config.js является избыточным. Если вы это сделаете, ваши шаблоны будут выглядеть как module.exports="module.exports=\"...\"".

Обновленные конфигурации:

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