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

Question

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

jun*_*lin 7 reactjs webpack webpack-dev-server webpack-4

webpack v4.20.2

webpack-dev-server v3.1.9

我正在使用webpack和运行React应用程序，webpack-dev-server并且遇到了有关的问题%PUBLIC_URL%。

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

Run Code Online (Sandbox Code Playgroud)

在%PUBLIC_URL%没有被编译的index.html，所以未能获得图标。

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>

Run Code Online (Sandbox Code Playgroud)

package.json脚本

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

Run Code Online (Sandbox Code Playgroud)

项目结构

.
??? config
?   ??? webpack.dev.conf.js
?   ??? webpack.prod.conf.js
??? public
?    ??? index.html
?    ??? favicon.ico
?    ??? manifest.json
??? src
?    ??? index.js
?     ...
??? package.json

Run Code Online (Sandbox Code Playgroud)

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',
    }),
  ],
  ...
}

Run Code Online (Sandbox Code Playgroud)

它与publicPath配置文件中的字段有关吗？

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

Answer 1

Tha*_*gLe 3

对于需要它的人。使用这个插件interpolate-html-plugin（从react-scripts中提取）

步骤1：

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

第2步：

在 webpack 配置的插件中，像这样添加这个插件。

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

Run Code Online (Sandbox Code Playgroud)

步骤3：

运行项目，它可以工作了

归档时间：	7 年，3 月前
查看次数：	1399 次
最近记录：	7 年，3 月前