Question

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

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，我正在导入库本地反应，请问var PUBLIC_URL会有问题吗？

我可以轻松地导入应用只导入'react-native'库吗？

非常感谢。的问候，

Answer 1

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

Answer 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]' ...
}
//...

您的设置与我的设置足够不同，我无法测试我的建议。抱歉，如果我错过了一些事情，还有路要走。但是，我希望他们能帮助某人！

URIError：无法解密param＆＃39; /％PUBLIC_URL％/ WEBPACK

2 个答案: