在开发期间无法使用 Webpack4 访问 %PUBLIC_URL%/favicon.ico

Question

我的 webpack.config.js 和 package.json 如下所示。当我进行构建时，/dist目录确实包含 favicon.ico 。但做的npm run start结果在URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'.

目录结构是

#webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./public/index.html",
    filename: "./index.html"
});
const copyWebpackPlugin = new CopyWebpackPlugin([{
    from: './public/favicon.ico',
    to: './favicon.ico'
}]);

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: { loader: "babel-loader" }
            },
            {
                test: /\.css$/,
                use: [ { loader: "style-loader" }, { loader: "css-loader" } ]
            },
            {
                test: /\.(pdf|jpg|png|gif|svg|ico)$/,
                use: [ { loader: 'url-loader' } ]
            }
        ]
    },
    plugins: [htmlWebpackPlugin, copyWebpackPlugin]
};

package.json

{
  "name": "obook",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "favicons-webpack-plugin": "0.0.9",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.17.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}