Answer the question
In order to leave comments, you need to log in
Why are the images not showing up?
They gave a ready-made config with pug on board, everything is going well-updating-building, except that img(src="images/image") does not connect the image, tried different urls including http://localhost:8080/images/image - useless. Where is the mistake?
const autoprefixer = require('autoprefixer'),
webpack = require('webpack'),
notify = require('webpack-build-notifier'),
clean = require('clean-webpack-plugin'),
path = require('path'),
css = require('mini-css-extract-plugin'),
mode = checkMode(process.argv[process.argv.length - 1], 'production');
module.exports = {
mode:mode,
entry:{
index:path.resolve(__dirname,'src/index.js'),
},
output:{
path:path.resolve(__dirname, 'build'),
filename:'js/[name].js',
},
module:{
rules:[
// JS
{
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015']
}
},
// PUG
{
test:/\.pug$/,
use:[
{
loader:'file-loader',
options:{
name:'[name].html',
}
},
{
loader:'pug-html-loader',
options:{
pretty:true
}
},
],
},
// SCSS
{
test:/\.(scss)$/,
use:[
{
loader:css.loader,
options:{
publicPath:'../',
sourceMap:true,
}
},
{
loader:'css-loader',
options:{
sourceMap:true,
minimize: mode,
}
},
{
loader:'resolve-url-loader',
options:{
}
},
{
loader:'postcss-loader',
options:{
ident: 'postcss',
plugins:[
autoprefixer({
browsers:['ie >= 8', 'last 4 version']
})
]
}
},
{
loader:'sass-loader',
options:{
sourceMap:true,
data:'$mode:' + mode + ';',
}
}
]
},
// CSS
{
test:/\.css$/,
use:[
{
loader:css.loader,
options:{
sourceMap:true,
}
},
{
loader:'css-loader',
options:{
sourceMap:true,
minimize: mode,
}
}
]
},
// IMG
{
test:/\.(png|jpg|gif|svg)$/,
exclude:/fonts/,
use:{
loader:'file-loader',
options:{
name:'[name].[ext]',
outputPath:'images/',
}
}
},
// FONTS
{
test:/\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
exclude:/images/,
use:[
{
loader:'file-loader',
options:{
name:'fonts/[name].[ext]',
publicPath:'../',
}
}
]
},
]
},
plugins:[
new clean('build/',{
"allowExternal": false,
"verbose":false
}),
new css({filename:'css/[name].css'}),
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new notify({
"title":"Project",
"suppressSuccess":true
})
],
resolve:{
modules:[
'node_modules',
'src/components',
'src/vendor',
],
extensions:['.js','.pug']
},
devtool:mode?'none':'inline-source-map',
devServer:{
contentBase:path.resolve(__dirname, 'build'),
compress:true,
port:8080
}
}
function checkMode(argv, check){
return argv.slice(7,argv.length) === check;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question