Webpack URIError：无法解码参数'/%PUBLIC_URL%/favicon.ico'
Posted
技术标签:
【中文标题】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 中的错误？
【问题讨论】：
你有解决办法吗？我有同样的问题:( 【参考方案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 步：
运行项目，它可以工作
【讨论】：
以上是关于Webpack URIError：无法解码参数'/%PUBLIC_URL%/favicon.ico'的主要内容，如果未能解决你的问题，请参考以下文章
URIError：无法解码参数“/%PUBLIC_URL%/favicon.ico”
URIError: 无法解码参数 '/<myusername>/<projectname>/%PUBLIC_URL%/manifest.json'