From 9c21c40f5cc7801da567f82dde229b8cccd7d7ad Mon Sep 17 00:00:00 2001
From: Andrey Popp <8mayday@gmail.com>
Date: Fri, 12 Aug 2016 15:07:12 +0300
Subject: [PATCH 1/7] Load favicon through html-loader.
Fixes #291.
---
config/paths.js | 3 ---
config/webpack.config.dev.js | 3 +--
config/webpack.config.prod.js | 3 +--
template/index.html | 1 +
template/{ => src}/favicon.ico | Bin
5 files changed, 3 insertions(+), 7 deletions(-)
rename template/{ => src}/favicon.ico (100%)
diff --git a/config/paths.js b/config/paths.js
index 7645917fbc9..e6f2ff6cb3a 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -36,7 +36,6 @@ if (isInCreateReactAppSource) {
module.exports = {
appBuild: resolveOwn('../build'),
appHtml: resolveOwn('../template/index.html'),
- appFavicon: resolveOwn('../template/favicon.ico'),
appPackageJson: resolveOwn('../package.json'),
appSrc: resolveOwn('../template/src'),
appNodeModules: resolveOwn('../node_modules'),
@@ -47,7 +46,6 @@ if (isInCreateReactAppSource) {
module.exports = {
appBuild: resolveApp('build'),
appHtml: resolveApp('index.html'),
- appFavicon: resolveApp('favicon.ico'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appNodeModules: resolveApp('node_modules'),
@@ -59,7 +57,6 @@ if (isInCreateReactAppSource) {
module.exports = {
appBuild: resolveApp('build'),
appHtml: resolveApp('index.html'),
- appFavicon: resolveApp('favicon.ico'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appNodeModules: resolveApp('node_modules'),
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index ae95e0d92b8..d9afab25eb3 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -126,7 +126,7 @@ module.exports = {
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
{
- test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+ test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'file',
query: {
@@ -169,7 +169,6 @@ module.exports = {
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
- favicon: paths.appFavicon,
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `env.js`.
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 66ca7a8cec1..c0f37e532b1 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -136,7 +136,7 @@ module.exports = {
{
// "file" loader makes sure those assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
- test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+ test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'file',
query: {
@@ -181,7 +181,6 @@ module.exports = {
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
- favicon: paths.appFavicon,
minify: {
removeComments: true,
collapseWhitespace: true,
diff --git a/template/index.html b/template/index.html
index 72e10e94c6c..bb9d543cec1 100644
--- a/template/index.html
+++ b/template/index.html
@@ -3,6 +3,7 @@
+
React App
diff --git a/template/favicon.ico b/template/src/favicon.ico
similarity index 100%
rename from template/favicon.ico
rename to template/src/favicon.ico
From 50fce7292bdf22c158ff072c1cd7eb1df95a7397 Mon Sep 17 00:00:00 2001
From: Andrey Popp <8mayday@gmail.com>
Date: Fri, 12 Aug 2016 15:27:13 +0300
Subject: [PATCH 2/7] Add test for *.ico in e2e test suite
---
tasks/e2e.sh | 3 +++
1 file changed, 3 insertions(+)
diff --git a/tasks/e2e.sh b/tasks/e2e.sh
index a1566a85bdb..dc0c57c682f 100755
--- a/tasks/e2e.sh
+++ b/tasks/e2e.sh
@@ -67,6 +67,7 @@ test -e build/*.html
test -e build/static/js/*.js
test -e build/static/css/*.css
test -e build/static/media/*.svg
+test -e build/static/media/*.ico
# Run tests
npm run test
@@ -96,6 +97,7 @@ test -e build/*.html
test -e build/static/js/*.js
test -e build/static/css/*.css
test -e build/static/media/*.svg
+test -e build/static/media/*.ico
# Run tests
npm run test
@@ -113,6 +115,7 @@ test -e build/*.html
test -e build/static/js/*.js
test -e build/static/css/*.css
test -e build/static/media/*.svg
+test -e build/static/media/*.ico
# Run tests
npm run test
From edef7d39cb237b73589c3e8d630cf0a7124d5313 Mon Sep 17 00:00:00 2001
From: Andrey Popp <8mayday@gmail.com>
Date: Fri, 12 Aug 2016 16:15:41 +0300
Subject: [PATCH 3/7] Configure html-loader to process
---
config/webpack.config.dev.js | 9 +++++++++
config/webpack.config.prod.js | 9 +++++++++
package.json | 1 +
template/index.html | 2 +-
4 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index d9afab25eb3..48d9db3dbc9 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -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 HTML tags.
+ {
+ test: /\.html/,
+ loader: 'html',
+ query: {
+ attrs: ['link:href'],
+ }
}
]
},
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index c0f37e532b1..120c1274cec 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -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 HTML tags.
+ {
+ test: /\.html/,
+ loader: 'html',
+ query: {
+ attrs: ['link:href'],
+ }
}
]
},
diff --git a/package.json b/package.json
index 77910fcf349..043fda237b5 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
"filesize": "3.3.0",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
+ "html-loader": "^0.4.3",
"html-webpack-plugin": "2.22.0",
"http-proxy-middleware": "0.17.0",
"jest": "14.1.0",
diff --git a/template/index.html b/template/index.html
index bb9d543cec1..f89671553eb 100644
--- a/template/index.html
+++ b/template/index.html
@@ -3,7 +3,7 @@
-
+
React App
From 22b175dbe5d70586658a727ab28a0d416111f5dd Mon Sep 17 00:00:00 2001
From: Andrey Popp <8mayday@gmail.com>
Date: Fri, 12 Aug 2016 20:47:18 +0300
Subject: [PATCH 4/7] Address feedback on html-loader inclusion.
---
config/webpack.config.prod.js | 2 +-
package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 120c1274cec..8a753f55e6a 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -157,7 +157,7 @@ module.exports = {
// "html" loader is used to process template page (index.html) to resolve
// resources linked with HTML tags.
{
- test: /\.html/,
+ test: /\.html$/,
loader: 'html',
query: {
attrs: ['link:href'],
diff --git a/package.json b/package.json
index 043fda237b5..1b389da8005 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
"filesize": "3.3.0",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
- "html-loader": "^0.4.3",
+ "html-loader": "0.4.3",
"html-webpack-plugin": "2.22.0",
"http-proxy-middleware": "0.17.0",
"jest": "14.1.0",
From f35f7251ceb64e3c208b839da5188af011f36f86 Mon Sep 17 00:00:00 2001
From: Andrey Popp <8mayday@gmail.com>
Date: Fri, 12 Aug 2016 20:53:59 +0300
Subject: [PATCH 5/7] Place favicon.ico at the root of the build dir
---
config/webpack.config.dev.js | 10 ++++++++++
config/webpack.config.prod.js | 10 ++++++++++
tasks/e2e.sh | 6 +++---
3 files changed, 23 insertions(+), 3 deletions(-)
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 48d9db3dbc9..9d4b3107ad6 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -128,11 +128,21 @@ module.exports = {
{
test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
include: [paths.appSrc, paths.appNodeModules],
+ exclude: /\/favicon.ico$/,
loader: 'file',
query: {
name: 'static/media/[name].[ext]'
}
},
+ // A special case for favicon.ico to place it into build root directory.
+ {
+ test: /\/favicon.ico$/,
+ include: [paths.appSrc],
+ loader: 'file',
+ query: {
+ name: 'favicon.ico?[hash:8]'
+ }
+ },
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 8a753f55e6a..0243a7e6a26 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -137,12 +137,22 @@ module.exports = {
// "file" loader makes sure those assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+ exclude: /\/favicon.ico$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'file',
query: {
name: 'static/media/[name].[hash:8].[ext]'
}
},
+ // A special case for favicon.ico to place it into build root directory.
+ {
+ test: /\/favicon.ico$/,
+ include: [paths.appSrc],
+ loader: 'file',
+ query: {
+ name: 'favicon.ico?[hash:8]'
+ }
+ },
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
diff --git a/tasks/e2e.sh b/tasks/e2e.sh
index dc0c57c682f..6e6c20c9420 100755
--- a/tasks/e2e.sh
+++ b/tasks/e2e.sh
@@ -67,7 +67,7 @@ test -e build/*.html
test -e build/static/js/*.js
test -e build/static/css/*.css
test -e build/static/media/*.svg
-test -e build/static/media/*.ico
+test -e build/favicon.ico
# Run tests
npm run test
@@ -97,7 +97,7 @@ test -e build/*.html
test -e build/static/js/*.js
test -e build/static/css/*.css
test -e build/static/media/*.svg
-test -e build/static/media/*.ico
+test -e build/favicon.ico
# Run tests
npm run test
@@ -115,7 +115,7 @@ test -e build/*.html
test -e build/static/js/*.js
test -e build/static/css/*.css
test -e build/static/media/*.svg
-test -e build/static/media/*.ico
+test -e build/favicon.ico
# Run tests
npm run test
From 58232c59665a1125d2ffe7cc0c21bef4bbbe77a3 Mon Sep 17 00:00:00 2001
From: Andrey Popp <8mayday@gmail.com>
Date: Fri, 12 Aug 2016 20:55:49 +0300
Subject: [PATCH 6/7] Make comment style consistent between prod and dev
webpack configs
---
config/webpack.config.prod.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 0243a7e6a26..ffeb75a9488 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -126,16 +126,16 @@ module.exports = {
loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
+ // JSON is not enabled by default in Webpack but both Node and Browserify
+ // allow it implicitly so we also enable it.
{
- // JSON is not enabled by default in Webpack but both Node and Browserify
- // allow it implicitly so we also enable it.
test: /\.json$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'json'
},
+ // "file" loader makes sure those assets end up in the `build` folder.
+ // When you `import` an asset, you get its filename.
{
- // "file" loader makes sure those assets end up in the `build` folder.
- // When you `import` an asset, you get its filename.
test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /\/favicon.ico$/,
include: [paths.appSrc, paths.appNodeModules],
From 38f668bca613956d927fd55281f11fad84da0bb0 Mon Sep 17 00:00:00 2001
From: Andrey Popp <8mayday@gmail.com>
Date: Fri, 12 Aug 2016 20:57:56 +0300
Subject: [PATCH 7/7] Fix html-loader config in dev mode
---
config/webpack.config.dev.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 9d4b3107ad6..5e28bb7c916 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -157,7 +157,7 @@ module.exports = {
// "html" loader is used to process template page (index.html) to resolve
// resources linked with HTML tags.
{
- test: /\.html/,
+ test: /\.html$/,
loader: 'html',
query: {
attrs: ['link:href'],