Load favicon through html-loader. by andreypopp · Pull Request #428 · react/create-react-app

andreypopp · 2016-08-12T12:10:37Z

Migration Instructions

Now favicon.ico is not treated specially anymore.
If you use it, move it to src and add the following line to <head> in your HTML:

<linkrel="shortcut icon" href="./src/favicon.ico">

Use html-loader to load favicon.

Test plan:

npm run create-react-app my-app
cd my-app
npm start
open http://localhost:3000
... observe favicon present
npm run build
npm install pushstate-server
./node_modules/.bin/pushstate-server build
open http://localhost:9000
... observe favicon present

Fixes#291.

Fixesreact#291.

andreypopp · 2016-08-12T12:11:19Z

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="shortcut icon" href="${require('./src/favicon.ico')}">


webpack-ism

There's a way to make html-loader work just on <link href="./src/favicon.js"> but I don't know how.

We need to find it :P

Are you sure? require("./src/favicon.js") seems less magical and also consistent with other webpack-isms used (require("./index.css")).

It's just a weird thing to explain. Imports are natural in JS but odd in HTML. Also since we use ES6 some people won't even know what require is.

andreypopp · 2016-08-12T12:12:34Z

Also, I don't have any idea how all of this works... Seems like html-webpack-plugin runs html through html-loader?interpolate.

andreypopp · 2016-08-12T13:17:02Z

+ test: /\.html/,
+ loader: 'html',
+ query: {
+ attrs: ['link:href'],


Could be extended with other tag:attribute combinations.

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

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

I think img:src is out of scope.

gaearon · 2016-08-12T21:37:57Z

👍 Nice job

just-boris · 2016-08-14T17:33:16Z

As you already have html-webpack-plugin, you can pass favicon option to it, instead of defining a lot of loaders.

@andreypopp Why you didn't do that?

gaearon · 2016-08-14T19:13:17Z

@just-boris This was exactly how it worked before. The intention here is not to solve the favico case but solve the generic problem of “how do I reference image (or other) files from index.html”? The previous solution only worked for favicons, this solution will also work for apple touch icons etc, is more generic, and explicit.

* Disable contentBase in development * Document #428

* Load favicon through html-loader. Fixesreact#291. * Add test for *.ico in e2e test suite * Configure html-loader to process <link href="..."> * Address feedback on html-loader inclusion. * Place favicon.ico at the root of the build dir * Make comment style consistent between prod and dev webpack configs * Fix html-loader config in dev mode

* Disable contentBase in development * Document react#428

* Load favicon through html-loader. Fixesreact#291. * Add test for *.ico in e2e test suite * Configure html-loader to process <link href="..."> * Address feedback on html-loader inclusion. * Place favicon.ico at the root of the build dir * Make comment style consistent between prod and dev webpack configs * Fix html-loader config in dev mode

* Disable contentBase in development * Document react#428

Load favicon through html-loader.
9c21c40
Fixesreact#291.

andreypopp reviewed Aug 12, 2016
View reviewed changes

ghost added the CLA Signed label Aug 12, 2016

andreypopp added 2 commits August 12, 2016 15:27

Add test for *.ico in e2e test suite
50fce72

Configure html-loader to process <link href="...">
edef7d3

andreypopp reviewed Aug 12, 2016
View reviewed changes

gaearon added this to the 0.3.0 milestone Aug 12, 2016

ghost added the CLA Signed label Aug 12, 2016

andreypopp added 4 commits August 12, 2016 20:47

Address feedback on html-loader inclusion.
22b175d

Place favicon.ico at the root of the build dir
f35f725

Make comment style consistent between prod and dev webpack configs
58232c5

Fix html-loader config in dev mode
38f668b

gaearon merged commit 60178ac into react:masterAug 12, 2016

This was referenced Aug 28, 2016
add contentBase for serving assets from src directory in development mode. #506
Closed
Add 0.3.0 changelog #539
Merged

gaearon added a commit that referenced this pull request Sep 2, 2016
Document#428
4d50072

This was referenced Sep 2, 2016
Disable implicit serving of the source files #551
Merged
Add support for a static folder #226
Closed

gaearon added a commit that referenced this pull request Sep 2, 2016
Disable implicit serving of the source files (#551)
f1c9584
* Disable contentBase in development * Document #428

gaearon mentioned this pull request Sep 3, 2016
manifest.json <link hrefs> turn into [object Object] #558
Closed

stayradiated pushed a commit to stayradiated/create-react-app that referenced this pull request Sep 7, 2016
Disable implicit serving of the source files (react#551)
ed5f0da
* Disable contentBase in development * Document react#428

feiqitian pushed a commit to feiqitian/create-react-app that referenced this pull request Oct 25, 2016
Disable implicit serving of the source files (react#551)
473ef3a
* Disable contentBase in development * Document react#428

lockBot locked and limited conversation to collaborators Jan 22, 2019

Uh oh!

Uh oh!

Conversation

andreypopp commented Aug 12, 2016• edited by gaearon Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Migration Instructions

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andreypopp commented Aug 12, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gaearon commented Aug 12, 2016

Uh oh!

just-boris commented Aug 14, 2016

Uh oh!

gaearon commented Aug 14, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

andreypopp commented Aug 12, 2016•
edited by gaearon
Loading