Question

我是webpack的新手，我得到了babel加载器和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

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 目录

OR：

除了上面提到的添加到 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。

Answer 2

我遇到了同样的问题，并通过以下方法解决了该问题：

在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.

Answer 3

<link href="<%= htmlWebpackPlugin.options.favicon %>" rel="shortcut icon">

和

new HtmlWebpackPlugin({
   favicon: "image/favicon.ico",
})

和

{
  test: /\.(jpe?g|gif|png|ico)$/,
  use: ['file-loader?name=[name].[ext]']
},

URIError：无法解密param＆＃39; /％PUBLIC_URL％/ favicon.ico＆＃39;

3 个答案:

快速修复

更好的解决方法