reactjs - 在开发过程中使用 WebPack 提供静态资源

Question

我是 WebPack 和 React 新手，在正确设置时遇到问题。

我的目录结构是:

/project/
  /src/
    index.html
    app.js
  /static/
    /images

我的“输出”WebPack 配置部分是:

output: {
  filename: 'bundle.js',
  path: path.join(__dirname, 'dist')
},

我的 React 应用程序运行良好，但我没有收到任何带有 URL 的图像:

<img src="/static/images/logo.jpg" />

如果我将图像 src 值更改为:

<img src="/src/static/images/logo.jpg" />

它们可以工作，但当然，在生产中不会出现这种情况，因为 /src/ 目录不会被部署。看来我的 root 设置不正确。

我需要告诉 WebPack 将“static”目录复制到“dist”吗？或者？感谢建议。

Answer 1

经过一番挖掘，我真正想要的是:https://webpack.github.io/docs/webpack-dev-server.html#content-base

然后我将 npm 启动脚本修改为:

"./node_modules/.bin/webpack-dev-server --hot --inline --progress --content-base src/"

现在相对图像路径又恢复正常了。