logo标签列表

Webpack URIError: 解码参数 '/%PUBLIC_URL%/favicon.ico' 失败

reactjswebpackwebpack-dev-serverwebpack-4
12

webpack v4.20.2

webpack-dev-server v3.1.9

我正在使用 webpack 和 webpack-dev-server 运行一个react应用程序，并遇到了一个有关%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中的错误？

2
你有解决办法吗？我也遇到了同样的问题 :( - huykon225
1个回答
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`
})

第三步：

运行项目，它就可以正常工作了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接