Webpack URIError：无法解码参数'/%PUBLIC_URL%/favicon.ico'答案

【问题标题】：Webpack URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'Webpack URIError：无法解码参数'/%PUBLIC_URL%/favicon.ico'
【发布时间】：2019-03-16 06:02:48
【问题描述】：

webpack v4.20.2

webpack-dev-server v3.1.9

我正在使用webpack 和webpack-dev-server 运行一个反应应用程序，遇到了一个关于%PUBLIC_URL% 的问题。

URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'

%PUBLIC_URL% 没有在 index.html 中编译，因此未能获得 favicon。

public/index.html

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
</head>

package.json 脚本

"scripts": {
    "dev": "webpack-dev-server --config ./config/webpack.dev.conf.js --open",
    "build": "webpack --config ./config/webpack.prod.conf.js"
  },

项目结构

.
├── config
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── public
│    ├── index.html
│    ├── favicon.ico
│    └── manifest.json
├── src
│    ├── index.js
│     ...
└── package.json

webpack.dev.conf.js

module.exports = {
  mode: 'development',
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    filename: '[name].bundle.[hash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  devtool: 'source-map',
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        secure: false,
      },
    },
    publicPath: '/',
  },
  module: {
    rules: [
      // styles
      {
        test: /\.(s)css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins() {
                return [autoprefixer()]
              },
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },

      // javascripts
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [['import', { libraryName: 'antd' }]],
          },
        },
        exclude: /node_modules/,
      },

      // images
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
              context: 'src',
              outputPath: 'assets/',
            },
          },
        ],
      },

      // htmls
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
  ],
  ...
}

是否与配置文件中的publicPath 字段有关？

如何修复webpack.dev.conf.js 和webpack.prod.conf.js 中的错误？

【问题讨论】：

你有解决办法吗？我有同样的问题:(

标签： reactjs webpack webpack-dev-server webpack-4

【解决方案1】：

送给有需要的人。使用这个插件interpolate-html-plugin（从 react-scripts 中提取）

第 1 步：

npm install interpolate-html-plugin --save-dev

第 2 步：

在 webpack config 的 plugins 中添加这个插件。

new InterpolateHtmlPlugin({
    PUBLIC_URL: 'static' // can modify `static` to another name or get it from `process`
})

第 3 步：

运行项目，它可以工作

【讨论】：