gpt4 book ai didi

reactjs - Webpack 文件加载器 publicPath

转载 作者:行者123 更新时间:2023-12-03 13:45:44 25 4
gpt4 key购买 nike

我有一个 React 项目,其中使用 webpack 3.10.0 和文件加载器 1.1.6 将一些图像和 json 文件移动到我的分发文件夹中。

Webpack 按预期发出文件,但 React 收到我的 json 和图像资源的错误 URL

我的标记如下所示:

<img src="../images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
alt="Hello World!!">

但应该是:

<img src="/assets/images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
alt="Hello World!!">

我的文件夹结构如下所示:
C:。
├────区
│ └──── Assets
│ ├───css
│ ├────数据
│ ├────图片
│ └────js
├────源
│ ├───css
│ ├────数据
│ ├────图片
│ └────js
│ ├──── Action
│ ├────组件
│ ├────容器
│ └──── reducer
└────测试

我认为文件加载器 publicPath 应该解决这个问题,但看来我要么误解了,要么我的配置有问题。有好心人可以帮助我吗?

webpack.config.js

var path = require('path');
const ExtractCSS = require("extract-text-webpack-plugin");

module.exports = {
entry: [
'./src/js/index.js'
],
output: {
path: path.resolve(__dirname, 'dist/assets/js'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
}
},
{
test: /\.scss$/,
loader: ExtractCSS.extract('css-loader!sass-loader')
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name (file) {
/*if (env === 'development') {
return '[path][name].[ext]'
}*/
return '[name]_[hash].[ext]'
},
publicPath: '/assets/images/',
outputPath: '../images/'
}
}
]
},
{
test: /\.json$/,

use: [
{
loader: 'file-loader',
options: {
name (file) {
/*if (env === 'development') {
return '[path][name].[ext]'
}*/
return '[name].[ext]'
},
publicPath: '/assets/data/',
outputPath: '../data/'
}
}
]
}
]
},
plugins: [
new ExtractCSS('../css/app.css', {
allChunks: true
})
],
resolve: {
extensions: ['.js', '.jsx']
},
//devtool: 'eval-source-map',
devServer: {
historyApiFallback: true,
contentBase: './dist/'
}
};

最佳答案

所以,而不是

{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name (file) {
/*if (env === 'development') {
return '[path][name].[ext]'
}*/
return '[name]_[hash].[ext]'
},
publicPath: '/assets/images/',
outputPath: '../images/'
}
}
]
},

你可以尝试类似的方法

{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name (file) {
/*if (env === 'development') {
return '[path][name].[ext]'
}*/
return '[name]_[hash].[ext]'
},
publicPath: function(url) {
return url.replace(../, '/assets/')
},
}
}
]
},

关于reactjs - Webpack 文件加载器 publicPath,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48563461/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com