我正在尝试通过image-webpack-loader模块加载图像,它可以正常工作,但是不是将图像保存在outputPath
所指示的位置,而是将其保存在项目的根目录中,有谁知道如何定义图像的输出?我已经阅读了整个文档(webpack-image-loader),但找不到任何说明如何配置文件输出的地方。在这里,我离开了我的webpack.config.js
const autoprefixer = require('autoprefixer')
module.exports = {
entry: ['./assets/src/scss/index.scss', './assets/src/service/clanService.js', './assets/src/service/locationService',
'./assets/src/model/Clan.js', './assets/src/model/Location.js', './assets/src/model/Player.js',
'./assets/src/utils/material.js', './assets/src/utils/constants.js', './assets/src/utils/auxFunctions.js',
'./assets/src/fonts/Supercell-magic-webfont.generated.woff','./assets/src/images/Clash_Royale.png'],
output: {
filename: './dist/bundle.js',
},
module: {
rules: [
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack@1.x
disable: true, // webpack@2.x and newer
outputPath: '/dist/images/' // <-- Thats not work
},
},
],
},
{
test: /^(?!.*\.generated\.ttf$).*\.ttf$/,
use: ['css-loader', 'fontface-loader'],
}, {
test: /\.generated.(ttf|eot|woff|woff2)$/,
use: [{
loader: 'file-loader',
options: {
outputPath: '/dist/fonts/',
},
}],
},
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: './dist/bundle.css',
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
},
}
],
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-object-assign']
},
}
],
},
}
如您所见,我还必须在entry
点一个接一个地输入文件,是否可以添加整个目录?
答案 0 :(得分:0)
在这里回答一个相当老的帖子,但是今天我遇到了同样的问题。
至少它可以帮助其他有相同问题的人。
在outputPath
之前为file-loader
设置image-webpack-loader
可以解决我的问题。
{
test: /\.(gif|png|jpe?g|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: '/dist/images/'
}
},
{
loader: 'image-webpack-loader',
options: { ... }
}
]
}