node.js - URI 错误 : Failed to decode param '/%PUBLIC_URL%/favicon.ico'

Question

我是 webpack 的新手，我让 babel loader 和 css loader 正常工作，项目编译成功，但是当我尝试通过浏览器访问时，出现以下错误。看起来好像无法识别 PUBLIC_URL。我相信我不知道如何配置它。

非常感谢您的宝贵意见。

谢谢

ℹ ｢wdm｣: Compiled successfully. URIError: Failed to decode param 
'/%PUBLIC_URL%/favicon.ico' at decodeURIComponent (<anonymous>) at 
decode_param (/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:172:12) at Layer.match 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:123:27) at matchLayer 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:574:18) at next 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:220:15) at expressInit 
(/home/mike/finance- 
grapher/node_modules/express/lib/middleware/init.js:40:5) at Layer.handle 
[as handle_request] (/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:95:5) at trim_prefix 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:317:13) at 
/home/mike/finance-grapher/node_modules/express/lib/router/index.js:284:7 
at Function.process_params (/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:335:12)

Webpack.config.js

.babelrc

package.json

project folder structure

Answer 1

快速修复

如果您要替换 %PUBLIC_URL% 会怎样？与实际路径。我认为 Babel 在编译 % 时遇到问题.尝试替换 %PUBLIC_URL%/favicon.ico与 /public/favicon.ico问题已解决。

更好的修复

将新规则添加到您的 webpack.config.js。

//...
{
  test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
  exclude: /node_modules/,
  use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
}
//...

然后通过在您的 App.js 中添加导入，将 .ico 资源复制到 dist 目录。 import '../public/favicon.ico';

在你的 index.html 中； <link rel="shortcut icon" href="favicon.ico">使用您的图标。不再需要提供路径，因为它将被复制到 dist 目录

或者:

除了上述添加到 webpack.config.js 的规则之外，根据您的设置，将插件添加到 webpack 配置可能是更好的方法。

对我来说，这看起来像是添加 npm 包 html-webpack-plugin到项目。然后在 webpack 配置中要求它； const HtmlWebpackPlugin = require('html-webpack-plugin'); .然后添加plugins到 module.exports .

//...
plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    filename: './index.html',
    favicon: './public/favicon.ico'
  })
]
//...

走这条路并在 webpack 配置中完成工作意味着添加到 App.js 以导入 favicon.ico 的行将不再需要。

---

编辑:如@Tolumide所述

Don't forget to configure the webpack.config appropriately per environment.