10

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。

公共/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.jsand中的错误webpack.prod.conf.js？

4

1 回答 1

3

对于需要它的人。使用这个插件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 步：

运行项目，它可以工作

于 2020-02-25T05:18:33.543 回答