请帮助配置文件加载器，以便在具有这种结构的项目中
我可以以类似的方式从公共文件夹中获取图像：
<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"/>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句