javascript - Webpack 做出反应。配置包含图片的文件夹
问题描述
请帮助配置文件加载器,以便在具有这种结构的项目中
我可以以类似的方式从公用文件夹中获取图像:
<img src={"/images/globalx_logo.svg"} className="globalx-logo"/>
为了尝试做某事,我写了这个 webpack.config.js:
var path = require('path')
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, './output'),
publicPath: '/output/',
filename: 'bundle.js'
},
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(jpg|png|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: './public/',
outputPath: './output/public/'
}
}
]
}
}
解决方案
你可以使用这样的装载机
{
test: /\.(jpg|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1000000,
fallback: 'file-loader',
name: 'images/[name].[hash].[ext]',
}
}
]
}
并使用导入
import logo from '/images/globalx_logo.svg'
<img src={logo} className="globalx-logo"/>
推荐阅读
- python - 访问 python - tuple 时需要澄清
- angular-template - 角, element and #document-fragment
- If I add
<template><img src="url1" /></template>
in any basic HTML page, the img resource aturl1
is not downloaded, and according to Chrome De - python - How to solve error on sending game action
- multithreading - TCP/IP Multithreading Application
- php - How to unset or clear a global variable in php YII2 Recursive function?
- spring - 从 IBM MQ spring boot listner 接收 Payload,然后在功能 approch 中将数据发送到 rabbit mq
- sql-server - Stored procedure invocation template for ensure transaction (all or nothing)
- linux - How do we can use the live MongoDB database in the local system | MongoDB | Database backup
- python - 我可以在reduce函数中有两个迭代吗?(Python)
- javascript - 检查是否支持可选链接
- If I add