webpack public 图片文件夹

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 时，脚本找不到位于我的 public 文件夹中的图像（它被指向服务器 index.js 中的静态文件夹）。我尝试在输出中添加 - publicPath: "/public/" 但它甚至找不到 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 install file-loader）：

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

大功告成！ Webpack 会自动将图像复制到正确的目录（您构建的脚本所在的目录）并确保 imageUrl 正确且有效。

很棒的奖励：您可以使用 image-webpack-loader 自动缩小图像，并使用 file-loader 执行自动文件名散列以进行长期缓存。只需查看他们的文档以获取更多信息！

webpack public 图片文件夹

webpack public folder for images

webpack

webpack-dev-server