Question

我正在使用ReactJS创建一个网站，并使用Webpack捆绑它。

我的一个组件只是一个包含图像的列（徽标）。现在大约有15张图像被随机显示，但这个数字肯定会随着时间的推移而增加。

当然，如果我要对它们进行硬编码，那将是非常糟糕的，例如：

import image01 from './logos/01.png';
import image02 from './logos/02.png';
import image03 from './logos/03.png';
.
.
.

每次我必须添加新图像时，都会改变代码。

我这样做：

logos.jsx

import React from 'react';
import './logos.css';

export default class Logos extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      logos: null
    }
  }

  componentWillMount() {
    fetch('/random_logos')
    .then(res => res.json())
    .then(json => {
      this.setState({
        logos: json.logos
      });
    });
  }

  render() {
    return (
      <div className="logos">
        // code to display the logos in a column
      </div>
    );
  }
}

这将从后端获取可用徽标的随机列表，并使其可用于组件。

当我执行npm start时，我的代码才有效，但是当我用Webpack捆绑所有内容时，my/application/dir/src/logos/logos下的文件不会被Webpack移动到正确的目录，即{{1}因为它们没有导入！

有没有办法告诉Webpack处理某个目录下的文件而不需要在我们的代码中专门处理它们？或者我必须创建一个scritp来将这些文件复制到我的生产目录中？

这是我的Webpack配置：

webpack.config.js

my/application/dir/resources/images/logos

如果我有五个名为var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'fe/src/') + '/index.jsx', output: { path: path.resolve(__dirname, 'public/js'), filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx?$/, exclude: [ "node_modules" ], loader: 'babel-loader', query: { presets: ['es2015', 'react','stage-0'] } }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.(jpe?g|png|gif|bmp|svg|ico)$/i, use: 'file-loader?name=[name].[ext]&outputPath=resources/images/' }, { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader?name=resources/fonts/[name].[ext]' } ] } }，01.png，02.png，03.png和04.png的文件，我的后端将返回如下的JSON：

05.png

Answer 1

我建议使用https://github.com/kevlened/copy-webpack-plugin。只需将插件添加到您的webpack配置中，如：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  ...,
  plugins: [
    new CopyWebpackPlugin([
        { from: '...', to: '...' }
    ])
  ]
}

然后只需从正确的文件夹中引用您的徽标。

May Webpack可以处理目录中的所有图像而不需要它们吗？

logos.jsx

webpack.config.js

1 个答案: