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中的错误？
对于需要它的人。使用此插件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`
})
步骤3：
运行项目，它可以工作