Webpack File Loader to Custom Load Path

Wed, Oct 2, 2019 in /quick-tips/

So, I asked on freenode ( #webpack ) and realised the answer before I could hear a response

│18:10:30 neildaemond | using this webpack.config.js, I end up with some files  │
│                     | like "27474d2c2aa69b9fff15b5748ef7be30.gif".. It all    │
│                     | works, but on the web server I want them to load from   │
│                     | another location like "domain.com/another/custom/path/2 │
│                     | 7474d2c2aa69b9fff15b5748ef7be30.gif", not at root       │
│                     | (domain.com/27474d2c2aa69b9fff15b5748ef7be30.gif)       │
│18:10:48 neildaemond | https://pastebin.com/AJKS9yf7                           │
│18:23:43 neildaemond | oh, I figured it out.. an option for the file-loader.   │
│                     | updated the webpack.config.js to:                       │
│                     | https://pastebin.com/GQvWF9H7                           │

for the record, that second pastebin link just holds:

 1const path = require('path');
 2
 3module.exports = {
 4    entry: './src/index.js',
 5    output: {
 6        filename: 'bundle.js',
 7        path: path.resolve(__dirname, 'dist')
 8    },
 9    module: {
10        rules: [
11            {
12                test: /\.css$/,
13                use: [
14                    'style-loader',
15                    'css-loader'
16                ]
17            },
18            {
19                test: /\.less/,
20                use: [
21                    {
22                        loader: 'style-loader', // creates style nodes from JS strings
23                    },
24                    {
25                        loader: 'css-loader', // translates CSS into CommonJS
26                    },
27                    {
28                        loader: 'less-loader', // compiles Less to CSS
29                    }
30                ]
31
32            },
33            {
34                test: /\.(png|svg|jpg|gif)$/,
35                use: [
36                    {
37                        loader: 'file-loader',
38                        options: {
39                            outputPath: 'site/templates/design/dist'
40                        }
41                    }
42
43                ]
44            }
45        ]
46    },
47    watch: true
48};

#Webpack