我有一个反应项目,其中我使用带有文件加载程序1.1.6的webpack 3.10.0将一些图像和json文件移动到我的分发文件夹中。
Webpack按预期发出文件,但是我的json和图像资产会收到错误的网址
我的标记看起来像:
<img src="../images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png"
alt="Hello World!!">
但应该是:
<img src="/assets/images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png"
alt="Hello World!!">
我的文件夹结构如下所示:
C:.
├───dist
│ └───assets
│ ├───css
│ ├───data
│ ├───images
│ └───js
├───src
│ ├───css
│ ├───data
│ ├───images
│ └───js
│ ├───actions
│ ├───components
│ ├───containers
│ └───reducers
└───tests
我认为文件加载器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/'
}
};
答案 0 :(得分:2)
所以,而不是
{
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/')
},
}
}
]
},
答案 1 :(得分:1)
您还可以将输出对象配置为上述级别,然后仅指定文件名称:
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: 'js/bundle.js'
},
例如json:
{
test: /\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: 'data/[name].[ext]',
}
}
]
}
答案 2 :(得分:0)
今天早上我的机器重新启动后,问题发生了变化?!!? (缓存问题??!)...现在将publicPath与outputPath连接起来,而不是忽略publicPath。 与此处解释的问题相同:https://github.com/webpack-contrib/file-loader/issues/228
恢复到0.10.1可以解决我的问题。
感谢所有试图提供帮助的人!