Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Configure html-loader to process <link href="...">
  • Loading branch information
andreypopp committed Aug 12, 2016
commit edef7d39cb237b73589c3e8d630cf0a7124d5313
9 changes: 9 additions & 0 deletions config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,15 @@ module.exports = {
limit: 10000,
name: 'static/media/[name].[ext]'
}
},
// "html" loader is used to process template page (index.html) to resolve
// resources linked with <link href="./relative/path"> HTML tags.
{
test: /\.html/,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should end with $?

loader: 'html',
query: {
attrs: ['link:href'],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be extended with other tag:attribute combinations.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oooh nice. Can you think up any other common combinations?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't bother adding more at the moment but rather serve on per-request basis.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think img:src is out of scope.

}
}
]
},
Expand Down
9 changes: 9 additions & 0 deletions config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,15 @@ module.exports = {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
// "html" loader is used to process template page (index.html) to resolve
// resources linked with <link href="./relative/path"> HTML tags.
{
test: /\.html/,
loader: 'html',
query: {
attrs: ['link:href'],
}
}
]
},
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
"filesize": "3.3.0",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-loader": "^0.4.3",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s drop caret here

"html-webpack-plugin": "2.22.0",
"http-proxy-middleware": "0.17.0",
"jest": "14.1.0",
Expand Down
2 changes: 1 addition & 1 deletion template/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="${require('./src/favicon.ico')}">
<link rel="shortcut icon" href="./src/favicon.ico">
<title>React App</title>
</head>
<body>
Expand Down