Webpack 文件加载器 publicPath

Question

我有一个 React 项目，其中使用 webpack 3.10.0 和文件加载器 1.1.6 将一些图像和 json 文件移动到我的分发文件夹中。

\n\n

Webpack 按预期发出文件，但 React 收到我的 json 和图像资源的错误 url

\n\n

我的标记看起来像：

\n\n

<img src="../images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" \nalt="Hello World!!">\n

\n\n

但应该是：

\n\n

<img src="/assets/images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" \nalt="Hello World!!">\n

\n\n

我的文件夹结构如下所示：\n\nC:.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80dist\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80assets\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80css\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80data\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80images\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80src\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80css\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80data\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80images\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80js\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80actions\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80components\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80containers\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80reducers\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80tests\n

\n\n

我认为文件加载器 publicPath 应该解决这个问题，但看来我要么误解了，要么我的配置有问题。\n有好心人可以帮帮我吗？

\n\n

webpack.config.js

\n\n

var path = require(\'path\');\nconst ExtractCSS = require("extract-text-webpack-plugin");\n\nmodule.exports = {\n  entry: [\n    \'./src/js/index.js\'\n  ],\n  output: {\n    path: path.resolve(__dirname, \'dist/assets/js\'),\n    filename: \'bundle.js\'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /(node_modules|bower_components)/,\n        use: {\n          loader: \'babel-loader\',\n          options: {\n            presets: [\'env\',\'react\']\n          }\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loader: ExtractCSS.extract(\'css-loader!sass-loader\')\n      },\n      {\n        test: /\\.(png|jpg|gif)$/,\n        use: [\n          {\n            loader: \'file-loader\',\n            options: {\n              name (file) {\n                /*if (env === \'development\') {\n                  return \'[path][name].[ext]\'\n              }*/\n                return \'[name]_[hash].[ext]\'\n              },\n              publicPath: \'/assets/images/\',\n              outputPath: \'../images/\'\n            }  \n          }\n        ]\n      },\n      {\n        test: /\\.json$/,\n\n        use: [\n          {\n            loader: \'file-loader\',\n            options: {\n              name (file) {\n                /*if (env === \'development\') {\n                  return \'[path][name].[ext]\'\n              }*/\n                return \'[name].[ext]\'\n              },\n              publicPath: \'/assets/data/\',\n              outputPath: \'../data/\'\n            }  \n          }\n        ]\n      }\n    ]\n  },\n  plugins: [\n    new ExtractCSS(\'../css/app.css\', {\n        allChunks: true\n    }) \n  ],\n  resolve: {\n    extensions: [\'.js\', \'.jsx\']\n  },\n  //devtool: \'eval-source-map\',\n  devServer: {\n    historyApiFallback: true,\n    contentBase: \'./dist/\'\n  }\n};\n

\n

Answer 1

今天早上我的机器重新启动后，问题发生了变化？！！！？（缓存问题？？！）... 现在不再忽略 publicPath，而是将 publicPath 与 outputPath 连接起来。此处解释的问题相同：https ://github.com/webpack-contrib/file-loader/issues/228

恢复到 0.10.1 可以解决我的问题。

感谢所有试图提供帮助的人！