Sunday, May 12, 2024
 Popular · Latest · Hot · Upcoming
114
rated 0 times [  119] [ 5]  / answers: 1 / hits: 25645  / 9 Years ago, wed, august 12, 2015, 12:00:00

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.


More From » webpack

 Answers
21

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

[#65445] Monday, August 10, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
irvingcarloe

Total Points: 677
Total Questions: 109
Total Answers: 96

Location: Svalbard and Jan Mayen
Member since Sun, Sep 25, 2022
2 Years ago
irvingcarloe questions
Wed, Mar 31, 21, 00:00, 3 Years ago
Tue, Aug 4, 20, 00:00, 4 Years ago
Fri, Jul 3, 20, 00:00, 4 Years ago
;