我正在使用 ReactJS 创建一个网站并使用 Webpack 将其 bundle 。
我的组件之一只是一个包含图像( Logo )的列。现在大约有 15 张图片随机显示,但这个数字肯定会随着时间的推移而增加。
当然,如果我硬编码所有这些,那就太糟糕了,比如:
import image01 from './logos/01.png';
import image02 from './logos/02.png';
import image03 from './logos/03.png';
.
.
.
这意味着每次我必须添加新图像时都要更改代码。
我是这样做的:
Logo .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>
);
}
}
这会从后端获取可用 Logo 的随机列表,并使其对组件可用。
当我执行 npm start
时,碰巧我的代码可以工作,但是当我将所有内容与 Webpack bundle 在一起时,我的文件位于 my/application/dir/src/logos/logos
没有被 Webpack 移动到正确的目录,这将是 my/application/dir/resources/images/logos
,因为它们没有被导入!
有没有办法告诉 Webpack 处理某个目录下的文件而不需要在我们的代码中特别要求它们?或者我必须创建一个脚本来将这些文件复制到我的生产目录?
这是我的 Webpack 配置:
webpack.config.js
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
和 05.png
,我的后端会返回这样的 JSON:
{
"logos": [
"05.png",
"03.png",
"01.png",
"02.png",
"04.png"
]
}
最佳答案
我建议使用 https://github.com/kevlened/copy-webpack-plugin .只需将插件添加到您的 webpack 配置中,例如:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...,
plugins: [
new CopyWebpackPlugin([
{ from: '...', to: '...' }
])
]
}
然后只需从正确的文件夹中引用您的 Logo 。
关于javascript - Webpack 可以在不需要它们的情况下处理目录中的所有图像吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44470578/