用于图像的网页包公用文件夹

Question

为了开始使用react，我在我的节点应用程序中添加了Webpack和Babel。我将所有脚本导入一个脚本，并将其设置为webpack.config.js中的条目，如下所示：

module.exports = {

entry: './src/App.js',
output: {
    path: __dirname,
    filename: 'app.js'
},
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['es2015', 'react']
        }
    }]
}

};

当启动webpack-dev-server时，脚本无法找到位于我的公共文件夹中的图像（该文件夹被指定为服务器index.js中的静态文件夹）。我试着在输出中添加公共路径：“/公共/”，但它甚至找不到app.js了。在Webpack中使用我的图像的最佳方式是什么？

Answer 1

只要把它们放在你的源目录和要求他们！

src/exampleImage.jpg=您的图像

src/ExampleImage.js：

import React from 'react';
import imageUrl from './exampleImage.jpg';

export default class ExampleImage extends React.Component {
  render() {
    return <img src={imageUrl} />;
  }
}

将正确的加载程序添加到加载程序阵列（不要忘记npm安装文件加载程序）：

  {
    test: /\.(jpg|png|gif)$/,
    loaders: ['file'],
  }

你完了！Webpack将自动将图像复制到正确的目录（您构建的脚本将位于该目录），并确保imageUrl正确且有效。

很酷的好处：你可以自动缩小图像与图像-webpack-加载器，并做一些事情，如自动文件名哈希与文件加载器长期缓存。只需检查他们的文档了解更多信息！