Пытаюсь собрать проект на webpack 5.
Вот настройки:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const isDev = process.env.NODE_ENV === 'development';
const optimization = () => {
const config = {
splitChunks: {
chunks: 'all',
},
};
if (!isDev) {
config.minimizer = [new TerserPlugin(), new CssMinimizerPlugin()];
}
return config;
};
const cssLoaders = (extra) => {
const loaders = [
{
loader: MiniCssExtractPlugin.loader,
options: {},
},
'css-loader',
];
if (extra) {
loaders.push(extra);
}
return loaders;
};
const plugins = () => {
const base = [
new HTMLWebpackPlugin({
template: './index.html',
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/favicon.ico'),
to: path.resolve(__dirname, 'dist'),
},
],
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
];
if (!isDev) {
base.push(new BundleAnalyzerPlugin());
}
return base;
};
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'development',
entry: {
main: ['@babel/polyfill', './index.js'],
// other: '',
},
optimization: optimization(),
devServer: {
port: 3200,
hot: isDev,
},
devtool: isDev ? 'source-map' : false,
resolve: {
extensions: ['.js'],
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: 'assets/[hash][ext]',
},
plugins: plugins(),
module: {
rules: [
{
test: /\.css$/i,
use: cssLoaders(),
},
{
test: /\.s[ac]ss$/i,
use: cssLoaders('sass-loader'),
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
Структура проекта :
dist
src
assets/logo.svg
styles/styles.scss
index.html
При работе с картинками в css все хорошо компилирует, свойства как backgorund: url(ссылка на картинку работает)
Но когда хочу в html использовать картинку в теге
выходит ошибка
Failed to load resource: the server responded with a status of 404 (Not Found) ( в браузере)
Как понял, при компиляции в файле html не проставляет хешированный путь к картинке..
При установке html-loader
rules: [
{
test: /\.html$/i,
loader: "html-loader",
},
Выходит ошибка
ERROR in Error: Child compilation failed:
Module Error (from ../node_modules/html-loader/dist/cjs.js):
HtmlSourceError: Bad value for attribute "src" on element "img": Must be non-empty (From line 27, column 14; to line 27, column 20)
Не понимаю, что делать.. svgo-loader тоже устанавливал
