Question

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 中进行编译，因此未能获得收藏夹。

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中的错误？

Answer 1

针对需要的人。使用此插件interpolate-html-plugin（从react-scripts中提取）

第1步：

if ($('.customFormTable') .find('#elementTableContainerCheckHidden').css("visibility") === "hidden") { $('.customFormTable').hide(); //hide your parent table }

第2步：

在webpack配置的插件中，将此插件添加到其中。

npm install interpolate-html-plugin --save-dev

第3步：

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

Webpack URIError：无法解码参数'/%PUBLIC_URL%/favicon.ico'

1 个答案: