使用WebPack在开发期间提供静态资产

Question

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

我的目录结构是：

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

我的＆＃34;输出＆＃34; WebPack配置部分是：

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

我的React应用程序运行良好，但我没有得到任何带有网址的图片：

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

如果我将图片src值更改为：

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

他们的工作，但当然，生产中不会出现这种情况，因为/src/目录不会被部署。好像我的根设置不正确。

我是否需要告诉WebPack复制＆＃34;静态＆＃34;目录进入＆＃34; dist＆＃34;？要么？建议表示赞赏。

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/"

现在相对图像路径再次开心。

Answer 2

您可以使用网络包import（或require）张图片。

将file-loader添加到webpack配置中（确保已安装file-loader）：

{
  test: /\.(png|gif|jpg)$/,
  include: [
    path.join(__dirname, 'static')
  ],
  loader: 'file',
}

然后你可以import一张图片：

import Image1 from '../static/images/image1.png';

并像这样使用它：

<img src={Image1} width="64" height="64" />

Webpack会将所有导入的图像放入＆＃34; dist＆＃34;目录。