我有一个 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/