web-dev-qa-db-ja.com

URIError：パラメーター '/%PUBLIC_URL%/favicon.ico'のデコードに失敗しました

私はwebpackを初めて使用し、バベルローダーとCSSローダーを動作させてプロジェクトを正常にコンパイルしましたが、ブラウザー経由でアクセスしようとすると、次のエラーが発生します。 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

プロジェクトフォルダー構造

node.jsreactjswebpackbabel
6
mousa rashid

クイックフィックス

_%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 configに追加することは、設定によってはより良い方法です。

私にとって、これはプロジェクトに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 configで作業を行うと、favicon.icoをインポートするためにApp.jsに追加される行が不要になります。

編集：@Tolumideが述べたように

環境ごとにwebpack.configを適切に構成することを忘れないでください。

5
Rockin4Life33

私は同じ問題を抱えていて、次のように修正しました：

plugins配列のwebpack.config.js内で、HtmlWebpackPluginおよびInterpolateHtmlPluginを追加します

  new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),

      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw)

これはInterpolateHtmlPluginのドキュメントです

Makes some environment variables available in index.html.
The public URL is available as %PUBLIC_URL% in index.html, e.g.:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
In production, it will be an empty string unless you specify "homepage"
in `package.json`, in which case it will be the pathname of that URL.
In development, this will be an empty string.
0
lele