开发期间无法通过Webpack4访问%PUBLIC_URL%/ favicon.ico

时间:2018-08-22 02:30:11

标签: reactjs webpack favicon

我的webpack.config.js和package.json如下所示。当我进行构建时,/dist目录中确实包含favicon.ico。但是,进行npm run start会产生URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'

目录结构为enter image description here



#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" } }

0 个答案:

没有答案