У меня такая проблема что при сборке пути изображений в css не генерируются по моим заданным правилам. Вместо указанного пути в PublicPath webpack генерирует хеш с расширением изображения, который даже не открывается. Кажется webpack сжимает файл, но перебарщивает что изображения не открываются.
В начале создания проекта я хотел что-бы webpack автоматически сжимал и конвертировал в webp формат и установил несколько плагинов и внёс несколько правил в файл конфигураций. Но позже оно мне не понадобилась и я удалил плагины и настройки в конфиге.
Может ли это влиять? Хотя я всё удалил.
Файл конфигураций
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const copyWebpackPlugin = require("copy-webpack-plugin");
const Paths = {
src: path.join(__dirname, "../src"),
dist: path.join(__dirname, "../dist"),
assets: "assets/",
};
module.exports = {
externals: {
paths: Paths,
},
entry: {
home: `${Paths.src}/js/home.js`,
main: `${Paths.src}/index.js`
},
output: {
filename: `${Paths.assets}js/[name].js`,
path: Paths.dist,
publicPath: "",
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
exclude: "/node_modules/",
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[path][name].[ext]",
context: "src/",
outputPath: 'assets/',
publicPath: "../",
useRelativePaths: true,
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
loader: "file-loader",
options: {
name: `[path][name]_[contenthash:8].[ext]`,
context: path.resolve(__dirname, "src/"),
outputPath: 'assets/',
publicPath: '../',
useRelativePaths: true,
},
},
{
test: /\.(sass|css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
postcssOptions: {
plugins: ["autoprefixer", "css-mqpacker", "cssnano"],
},
},
},
{
loader: "sass-loader",
options: { sourceMap: true },
},
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: `${Paths.assets}css/[name].css`,
}),
new copyWebpackPlugin({
patterns: [
{ from: `${Paths.src}/img`, to: `${Paths.assets}img` },
{ from: `${Paths.src}/icons`, to: `${Paths.assets}icons` },
{ from: `${Paths.src}/libs`, to: `${Paths.dist}/libs` },
{ from: `${Paths.src}/static`, to: "" },
],
options: {
concurrency: 100,
},
}),
],
};
package json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "concurrently --kill-others \"npm run build\" \"npm run ndmon\"",
"dev": "webpack serve --open --config ./webpack/webpack.devs.conf.js",
"build": "webpack --config ./webpack/webpack.build.conf.js -w",
"ndmon": "nodemon index"
},
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^9.0.2",
"express": "^4.17.1",
"express-handlebars": "^5.3.2",
"hbs": "^4.1.2"
},
"devDependencies": {
"@babel/core": "^7.14.8",
"@babel/preset-env": "^7.14.8",
"autoprefixer": "^10.3.1",
"babel-loader": "^8.2.2",
"concurrently": "^6.2.0",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.2.0",
"css-mqpacker": "^7.0.0",
"cssnano": "^5.0.7",
"file-loader": "^6.2.0",
"handlebars-loader": "^1.7.1",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.1.0",
"node-sass": "^6.0.1",
"nodemon": "^2.0.7",
"postcss": "^8.3.6",
"postcss-loader": "^6.1.1",
"sass-loader": "^12.1.0",
"webpack": "^5.46.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
}
}
Вот что я получаю
Вес изображения получили 45byte, а оригинал весит 95kb
С генерировавшийся путь в css: body{background:url(82d9924ce7c7cb06a0d2.jpg)}
Помогите решить эту проблему! Заранее спасибо.
publicPath: "/"