laravel-mix
laravel-mix copied to clipboard
Option to prevent imports from generating files
- Laravel Mix Version: 6.0.42
- Node Version: v17.9.0
- NPM Version: 8.5.5
- OS: Windows 10
Description:
Whenever a file such as an image gets imported in a React component, it'll generate it in the public path directory. This can be rather annoying as I already have all images used within the project stored in my public directory under specific subdirectories.
Steps To Reproduce:
// webpack.mix.js
mix
.webpackConfig({
resolve: {
alias: {
'@components': path.resolve(__dirname, 'resources/js/components/'),
'@store': path.resolve(__dirname, 'resources/js/store/'),
'@api': path.resolve(__dirname, 'resources/js/api/'),
'@utils': path.resolve(__dirname, 'resources/js/utils/'),
'@public': path.resolve(__dirname, 'public/'),
},
},
})
.js('src/index.js', 'public/js')
.react()
.sourceMaps(false);
if (mix.inProduction()) {
mix.version();
}
// resources/js/components/TextInput/index.js
import delete from '@public/images/icons/delete.svg';
The following code snippet results in a newly generated image within the public/images directory.
A solution could be to ignore publishing files that are already in the public path directory.
My suggestion is to reference the paths using href / src instead of importing them — however I think asset modules can be augmented to produce urls instead but I'm not certain. I'll have to look into it.
I noted here that copying files preferably should be optional since eg imagemin is also copying files, so specifically outputting files found in css url() references may not be wanted
https://github.com/laravel-mix/laravel-mix/issues/3211#issuecomment-1141640373
However also note the css copy images is not keeping relative paths (ie subfolders) as required, so imagemin will put them in the correct subfolders within the images folder, but the ones found in the css will just be output to the root of the images folder, meaning there are 2 separate copies of the same file