I was working with webpack 5 and hanging on a curious issue.
My assets(pictures, svgs) are not found by the dev server, but js files and css files works fine. If I remove the outputPath: "/assets/images", value from the image file loader(in webpack.conf), so the files are stored in the main folder and works.
So my thoughts are the asset folder is not transferred to the dev server!?
I was testing around 6 hours with any config settings, documentations etc but it does not work.
Here's my webpack.conf
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
module: {
rules: [
{
exclude: /(node_modules)/,
loader: 'babel-loader',
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|mp4|svg|jpe?g|gif)$/,
exclude: /fonts/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "/assets/images",
}
}
]
},
{
test: /\.(eot|woff|woff2|ttf)$/,
exclude: /assets/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "/assets/fonts",
}
}
]
},
{
test: /\.html$/i,
loader: 'html-loader',
}
]
},
resolve: {
extensions: ['*', '.js']
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
title: 'Project',
template: './src/index.html',
minify: false
}),
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false,
}),
new MiniCssExtractPlugin({
filename: "app.css"
})
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'app.js',
publicPath: ''
},
devServer: {
port: 8080,
contentBase: './dist',
publicPath: ''
},
mode: "development"
};
Package.json
{
"name": "website_webpack",
"version": "1.0.0",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@barba/core": "^2.9.7",
"@lottiefiles/lottie-player": "^0.5.1",
"gsap": "^3.5.1",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"smooth-scrollbar": "^8.5.3",
"webpack-cli": "^4.2.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-stage-3": "^7.8.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0-alpha.17",
"mini-css-extract-plugin": "^1.3.3",
"postcss": "^8.2.1",
"postcss-loader": "^4.1.0",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"webpack": "^5.10.3",
"webpack-dev-server": "^3.11.0"
},
"directories": {
"test": "test"
},
"description": ""
}
Folder hierarchy:
It would be a pleasure if anyone can help me ;)
Regards, Steve
