URIError: 无法解码参数 '/%PUBLIC_URL%/ WEBPACK答案

【问题标题】：URIError: Failed to decode param '/%PUBLIC_URL%/ WEBPACKURIError: 无法解码参数 '/%PUBLIC_URL%/ WEBPACK
【发布时间】：2017-12-08 13:42:37
【问题描述】：

我在使用 webpack 运行我的 react 应用程序时遇到问题，我有这个错误：

URIError: Failed to decode param '/%PUBLIC_URL%/src/css/TagsCheck.css'
    at decodeURIComponent (<anonymous>)

这是我的 webpack.config.js：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var publicUrl = '/public';

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./index.js",
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    inline: true
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    // new HtmlWebpackPlugin({
    //     pkg: require("./package.json"),
    //     template: 'template.html',
    //     inject: false
    // }),
    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    new InterpolateHtmlPlugin({
      PUBLIC_URL: publicUrl
      // You can pass any key-value pairs, this was just an example.
      // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
    }),
    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve('public/index.html'),
    }),
  ],
};

我希望在我的索引文件中可以读取/%PUBLIC_URL%/ 的值。我必须做什么才能运行我的代码？

我还有一个问题... 我正在使用 react 并且我正在导入库 react-native，我对 var PUBLIC_URL 有什么问题吗？

我可以让应用程序只导入'react-native' 库吗？

非常感谢。问候，

【问题讨论】：

这里有同样的问题，如果我找到解决方法，我会在这里发布答案。

标签： reactjs react-native webpack

【解决方案1】：

这可能与您项目中某处的空格编码（ISO hex %20）有关，请查看此 Github 问题评论：https://github.com/facebook/create-react-app/issues/4150#issuecomment-379742880

【讨论】：

【解决方案2】：

免责声明：我不熟悉InterpolateHtmlPlugin() 的工作原理以及与之相关的最佳实践。但是，我认为 Babel 正在使用 % 字符。如果您改用实际路径怎么办。也许this answer 会有所帮助。

另一种选择是将 TagsCheck.css 作为 HtmlWebpackPlugin({ ... }) 的一部分包含在 webpack 配置中。然后该文件将被复制到您的输出目录，并且不再需要 %PUBLIC_URL% 来引用它，因为它位于引用它的文件的相对根目录中。

可能还需要在 webpack.config.js 中添加另一条规则：

//...
{
  test: /\.css$/,
  exclude: /node_modules/,
  use: ['style-loader', 'css-loader']
  // The filename should be preserved, if not then tack on ?name=[name].[ext] to either loader
  // e.g. 'style-loader?name=[name].[ext]' ...
}
//...

您的设置与我的不同，我无法测试我的建议。抱歉，如果我错过了一些东西并且离题很远。不过，我希望他们能帮助别人！

【讨论】：