我无法确定在ReactJS webpack中加载图像的正确加载器是什么,
你可以帮个忙吗?我收到此错误:
Module parse failed: /Users/imac/Desktop/fakeeh/imgs/logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
这是webpack配置:
const path = require('path');
module.exports = {
// the entry file for the bundle
entry: path.join(__dirname, '/client/src/app.jsx'),
// the bundle file we will get in the result
output: {
path: path.join(__dirname, '/client/dist/js'),
filename: 'app.js',
},
module: {
// apply loaders to files that meet given conditions
loaders: [{
test: /\.jsx?$/,
include: path.join(__dirname, '/client/src'),
loader: 'babel-loader',
query: {
presets: ["react", "es2015", "stage-1"]
}
}],
},
// start Webpack in a watch mode, so Webpack will rebuild the bundle on changes
watch: true
};
非常感激!!
我也遇到了这个问题,我找到了一个解决方法。
首先,您需要安装两个加载器(file-loader,url-loader)。例如$ npm install --save file-loader url-loader
如果你想支持CSS。确保安装样式加载器。例如,$ npm install --save style-loader css-loader
接下来,您更新webpack配置,请检查下面的示例配置。希望能帮助到你。
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
}, {
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000' }]
},
你可以使用file-loader。您需要先使用npm安装它,然后像这样编辑您的webpack配置
module: {
// apply loaders to files that meet given conditions
loaders: [{
test: /\.jsx?$/,
include: path.join(__dirname, '/client/src'),
loader: 'babel-loader',
query: {
presets: ["react", "es2015", "stage-1"]
}
},
{
test: /\.(gif|svg|jpg|png)$/,
loader: "file-loader",
}],
},
使用Webpack 3,您可以使用url-loader
如下:
安装url-loader
:
npm install --save url-loader
然后,在您的Webpack配置中:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
最后,在你的代码中:
<img src={require('./path/to/image.png')} />