I was watching a course that I spent js where they explain the use of webpack and its libraries, something new for me, I realized that the course is a little old and I have adapted some things to the current versions but nothing has worked with the image that does not load, I was giving several laps and I have not been able to achieve it, I would appreciate the help of anyone. If you see the dirty code is so many tests and lines that I have put but have not worked, but I have left them commented. NOTE: I am using a translator, my English is not very good.
if you need me to show you something additional, I will be happy to do so
the code doesn't seem to have any problem, but the image doesn't show up on my site, I feel it's the stupidest mistake in the world for not finding it myself.
I was trying what they indicated here in stackoverflow but it didn't help me, I left it there among the commented code.
webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
// imgname = require("file-loader!./assets/logo.png");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
optimization: {
minimizer: [ new OptimizeCssAssetsPlugin() ]
},
module: {
rules: [
{
test: /\.css$/,
exclude: /styles\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /styles\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: false }
}
]
},
// {
// test: /\.(woff(2)?|ttf|eot)$/,
// type: 'asset/resource',
// generator: {
// filename: './fonts/[name][ext]',
// },
// },
{
// test: /\.(png|svg|jpg|gif)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// esModule: false,
// name: 'assets/[name].[ext]'
// }
// }
// ]
},
// {
// test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
// type: "javascript/auto",
// use: [{
// loader: 'file-loader',
// options: {
// name: '[name].[ext]',
// outputPath: 'assets/fonts/',
// publicPath: '../fonts/'
// }
// }]
// }
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
name: 'assets/[name].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
ignoreOrder: false
}),
new CopyPlugin({
patterns: [
{ from: 'src/assets/fonts', to: 'assets/' }
]
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'static' }
]
})
]
}
webpack.prod.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MinifyPlugin = require('babel-minify-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimizer: [ new OptimizeCssAssetsPlugin() ]
},
output: {
filename: 'main.[contenthash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
},
{
test: /\.css$/,
exclude: /styles\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /styles\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: false }
}
]
},
// {
// test: /\.(png|svg|jpg|gif)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// esModule: false,
// name: 'assets/[name].[ext]'
// }
// }
// ]
// }
// {
// test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
// type: "javascript/auto",
// use: [{
// loader: 'file-loader',
// options: {
// name: '[name].[ext]',
// outputPath: 'assets/',
// publicPath: '../'
// }
// }]
// }
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
name: 'assets/[name].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
ignoreOrder: false
}),
new CopyPlugin({
patterns: [
{ from: 'src/assets', to: 'assets/' }
]
}),
new MinifyPlugin(),
new CleanWebpackPlugin(),
],
output: {
filename: 'main.[contenthash].js',
clean: true,
}
};
package.json
{
"name": "webpack-inicial",
"version": "1.0.0",
"description": "Este es un cascaron de un proyecto de webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.prod.js",
"build:dev": "webpack --config webpack.config.js",
"start": "webpack-dev-server --open --port=8080"
},
"author": "José Hidalgo",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.23.0",
"@babel/preset-env": "^7.22.20",
"babel-loader": "^9.1.3",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-preset-minify": "^0.5.2",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.8.1",
"file-loader": "^6.2.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.3",
"install": "^0.13.0",
"mini-css-extract-plugin": "^2.7.6",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"path": "^0.12.7",
"style-loader": "^3.3.3",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
"dependencies": {
"@formkit/auto-animate": "^0.8.0"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<img src="./assets/logo.png" alt="logo overwatch">
<h1>asdasd</h1>
</body>
</html>