Структура, вложенные папки webpack
У меня есть проект где в index.html прописаны пути к картинкам. Как в webpacke сохранить их. У меня есть папки и в них может быть картинка или вложенная папка. Вебпак почему-то игнорирует вложенные папки в которые картинка конфиг:
import path from "path";
import webpack from "webpack";
import "core-js/stable";
import "webpack-dev-server";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { CleanPlugin } from "webpack";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import OptimizeCssPlugin from "css-minimizer-webpack-plugin";
import TerserWebpackPlugin from "terser-webpack-plugin";
import { Optimization } from "webpack";
import { HotModuleReplacementPlugin } from "webpack";
const isDev = process.env.NODE_ENV === "development";
const isProd = !isDev;
const filename = (ext: string) =>
isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;
const optimization = (): Optimization => {
const config: Optimization = {
splitChunks: { chunks: "all" },
runtimeChunk: "single",
};
if (isProd) {
config["minimizer"] = [new OptimizeCssPlugin(), new TerserWebpackPlugin()];
}
return config;
};
const cssLoaders = (extra?: string) => {
const loader = [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env"],
},
},
},
];
if (extra) {
loader.push(extra);
}
return loader;
};
const config: webpack.Configuration = {
context: path.resolve(__dirname, "src"),
mode: "development",
entry: {
main: ["core-js/stable", "./ts/main.ts"],
},
resolve: {
extensions: [".js", ".json", ".png"],
alias: {
"@models": path.resolve(__dirname, "src/modules"),
"@": path.resolve("src"),
style: path.resolve("src/assets/css/"),
},
},
output: {
path: path.resolve(__dirname, "dist"),
filename: filename("js"),
assetModuleFilename: "[path][name][ext]",
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
minify: {
collapseWhitespace: isProd,
},
}),
new CleanPlugin({}),
new MiniCssExtractPlugin({
filename: filename("css"),
}),
new HotModuleReplacementPlugin({}),
],
module: {
rules: [
{
test: /\.css$/,
use: cssLoaders(),
},
{
test: /\.(png|jpg|svg|gif)$/,
type: "asset/resource",
},
{ test: /\.(ttf|woff|woff2|eot)$/, type: "asset/inline" },
{
test: /\.s[ac]ss$/,
use: cssLoaders("sass-loader"),
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.m?ts$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-typescript"],
},
},
},
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
],
},
optimization: optimization(),
devServer: {
port: "3005",
devMiddleware: {
writeToDisk: true,
},
hot: isDev,
historyApiFallback: true,
compress: true,
open: true,
},
devtool: isProd ? false : "source-map",
};
export default config;
Источник: Stack Overflow на русском