reactjs - 如何加载图像反应 babel
问题描述
我正在我的 app.js 上加载图标
import bg from './icons/bg.png';
import br from './icons/br.png';
import rg from './icons/rg.png';
import ig from './icons/invert.png';
import bw from './icons/bw.png';
import by from './icons/by.png';
import gm from './icons/gm.png';
import rs from './icons/rs.png';
当我运行默认的反应启动脚本时它们工作正常,但是当我尝试使用这个 webpack 编译时:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/js/index.js',
devtool: 'inline-source-map',
target: 'electron-renderer',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [[
'@babel/preset-env', {
targets: {
esmodules: true
}
}],
'@babel/preset-react']
}
}
},
{
test: [/\.s[ac]ss$/i, /\.css$/i],
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
}
]
},
resolve: {
extensions: ['.js'],
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'build', 'js'),
},
};
我得到每个图像的这个错误:
ERROR in ./src/js/icons/bg.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./src/js/App.js 2:0-32 230:9-11
@ ./src/js/index.js 4:0-24 5:107-110
这可证明意味着 babel 正在尝试将图像加载为 javascript 文件,有没有办法在使用 Babel 编译时在 React 上加载图像?
解决方案
推荐阅读
- javascript - Chrome 媒体控制 - 下载按钮
- android - 像 androidtv livetv 应用程序一样的 EPG 布局
- python - 在 opencv3 上进行视差映射的 cv2.StereoSGBM_create() 和 cv2.StereoBM_create() 函数有什么区别?
- php - 如何修复 UnexpectedValueException 引发的消息“无效的路由操作:...在 Laravel
- mysql - 如何在时间戳中获得最小值最大值
- botframework - 如何删除 Prompt.Choice 中的 tooManyAttempts 消息?如何接受 Prompt.Choice 中不在选项列表中的文本?C#
- node.js - MDN express 教程中使用的 express-validator
- cassandra - 如何在cassandra中同时使用和订购
- angular - 验证Angular 2+中的输入字段数组
- ios - 如何在swift 4中从蓝牙低功耗设备获取广告和响应数据?