The file-loader is able to organize images into separate folders when saving them. For example, an image file named "example.jpg" located in Project/Module

Question

The file-loader is able to organize images into separate folders when saving them. For example, an image file named "example.jpg" located in Project/Module

Hey there! I'm currently in the process of setting up a Webpack configuration that will generate files for each folder within my project. Unfortunately, creating a separate webpack.config file for each folder is not an option.

So far, I have successfully processed index.html, JS, and SASS files. The next hurdle I'm facing is handling the images.

This is what currently occurs:

cd /MyProject/ && npm run build

Within this directory, there are 'modules', with each module being represented by a folder.

Source Files:

/MyProject/MyModule/src/js/app.js

/MyProject/MyModule/src/scss/app.scss

/MyProject/MyModule/src/index.html

/MyProject/MyModule/src/img/example1.jpg

Distribution Files:

MyProject/MyModule/dist/(app.css|app.js|index.html|img/example1.jpg)

The Issue:

When saving the images using the current method below,

name: '[path]../../dist/img/[name].[ext]'

My HTML output ends up looking like this:

<img src="/MyModule/src/img/../dist/img/screenshot.png" alt="Screenshot">

I do understand why this happens, but I haven't found a more suitable solution yet.

If I remove [path], the images get saved inside MyProject instead of MyModule, which is not desired.

webpack.config.js

 // Your restructured webpack config code goes here

javascript npm webpack webpack-4

Answer 1

Answer №1

I plan to improve my RegExp skills, but for now I've implemented the code below

        {
            test: /\.(jpg|png|gif|svg)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        regExp: /([^\0]+)\/([^\0]+)\/([^\0]+)\/([^\0]+)\/([^\0]+)\.(jpg|png|gif|svg)$/,
                        name: '[2]/dist/img/[name].[ext]',
                        outputPath: '',
                        publicPath: '/',
                    }
                }
            ]
        }

Answer 2

I plan to improve my RegExp skills, but for now I've implemented the code below

        {
            test: /\.(jpg|png|gif|svg)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        regExp: /([^\0]+)\/([^\0]+)\/([^\0]+)\/([^\0]+)\/([^\0]+)\.(jpg|png|gif|svg)$/,
                        name: '[2]/dist/img/[name].[ext]',
                        outputPath: '',
                        publicPath: '/',
                    }
                }
            ]
        }

The file-loader is able to organize images into separate folders when saving them. For example, an image file named "example.jpg" located in Project/Module

Answer №1

Similar questions

What is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

"Every time an Ajax call is successful, the 'else' clause in

When applying the OWASP ESAPI encodeForHTMLAttribute method, I noticed that symbols are being rendered as their corresponding HTML entity numbers instead of the actual symbols

Issue with PHP retrieving initial value of post data

Unable to capture HTML form input in $_POST[]

Trouble with React Material-UI Select component onChange event

Ways to attach an item using its lower point instead of its upper coordinate

Which HTML element does each script correspond to?

Increase the size of the SVG area

Tips for preventing tiny separation lines from appearing above and below unordered list elements

Troubaling with AngularJS Routing issues

What is the best way to align text in the center of a div?

Swiper V7 React is experiencing issues with numerous parameters not functioning properly

"Transforming Selections in Illustrator through Scripting: A Step-by-Step Guide

What is the best method for managing file storage and retrieval in web applications that only run on the client-side?

Embarking on a New Project with Cutting-Edge Technologies: Angular, Node.js/Express, Webpack, and Types

Leveraging traditional code methods within AngularJs

LeadFoot's intern framework encountered difficulty locating an element

Troubleshooting issues with ASP.NET bundling and minification when using Angular.js

An error was encountered regarding an undefined property while executing NPM and PACT