设置image-webpack-loader的输出
设置image-webpack-loader的输出
提问于 2018-12-20 13:18:52
我试着通过图片-webpack-加载器模块加载图片，它工作正常，但它不是将图片保存在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位置逐个输入文件，是否可以添加整个目录？
回答 1
Stack Overflow用户
发布于 2019-06-13 04:40:44
在这里回答一个相当老的帖子，但我今天也有同样的问题。
至少它可以帮助其他有同样问题的人。
在image-webpack-loader之前为file-loader设置outputPath为我解决了这个问题。
{
test: /\.(gif|png|jpe?g|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: '/dist/images/'
}
},
{
loader: 'image-webpack-loader',
options: { ... }
}
]
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53862792
复制相关文章
相似问题
腾讯云开发者
