Laravel-mix: Folder structure for images

[drn5910]

In the latest version images are sent to the public folder under the images/ directory. This is great and an improvement on being placed into the root of the public directory.

However I'm wondering if there is configuration options to allow the path to be copied, for example if I have this structure:

• images/
  
  
  
  • vendor/
  
  
  • lightbox/
    
    
    
    
    
    • close.png
    
    
    
  
  
  • image2.png
  
  
  • image1.jpg
  
  

These are currently all sent to the images/ folder. I'd like the ability to copy the structure over too, apparently the [path] or [folder] can be used but this results in:

Using [path]
images/resources/assets/images/vendor/lightbox/close.png

Using [folder]
images/lightbox/close.png

Is there anyway of getting only a substring of the path (so it excludes resources/assets/images in the [path])?

I realise I could simply move my images folder to the project root... but it would be nice to resolve this without doing that.

Thanks (I hope this is the best place to post this, otherwise I could move it to a forum..)

[KristofMorva]

Also, it's not only for clarity, because for example I have a loading.gif in my application, but kartik-v/bootstrap-fileinput also has one, which overrides the original one, so it'd definitely be an improvement if these images would be moved into vendor/vendorname/imagename.ext as default.

[KristofMorva]

I have solved it this way:

{
    test: /\.(png|jpg|gif)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'file-loader',
    options: {
        name: 'images/[name].[ext]?[hash]',
        publicPath: '../'
    }
},

{
    test: /\.(woff2?|ttf|eot|svg|otf)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'file-loader',
    options: {
        name: 'fonts/[name].[ext]?[hash]',
        publicPath: '../'
    }
},

{
    test: /\.(png|jpg|gif)$/,
    include: /(node_modules|bower_components)/,
    loader: 'file-loader',
    options: {
        name: 'images/vendor/[4]/[name].[ext]?[hash]',
        publicPath: '../',
        regExp: '(/|\\\\)(node_modules|bower_components)(/|\\\\)(.*?)(/|\\\\)'
    }
},

{
    test: /\.(woff2?|ttf|eot|svg|otf)$/,
    include: /(node_modules|bower_components)/,
    loader: 'file-loader',
    options: {
        name: 'fonts/vendor/[4]/[name].[ext]?[hash]',
        publicPath: '../',
        regExp: '(/|\\\\)(node_modules|bower_components)(/|\\\\)(.*?)(/|\\\\)'
    }
}

I couldn't come up with any nicer solution, but at least it's working. @JeffreyWay should I create a PR, or it's either not a general problem, or there is a much simpler solution I couldn't think of?

[terion-name]

I can't force keeping directory structure with any options (

[danremollino]

@david-ridgeonnet sorry in advance if I'm not following you correctly, but try this...

.copy('resources/assets/images', 'public/images', false)

copy() takes a third parameter.

[drn5910]

@danremollino no worries - we're not trying to copy the images though. Webpack is automatically copying the images when it detects it in CSS etc. but it doesn't maintain any sort of directory structure other than copying to the images folder (so the whole heirarchy of image folders gets flattened to just one level).

[KristofMorva]

@david-ridgeonnet I'll create a PR as soon as Webpack's package.json file is updated to use the newest loader-utils, which includes my PR (https://github.com/webpack/loader-utils/pull/59), which I have created to be able to solve this solution nicely.