Unexpected [path] in file loader

Question

For my image location: /src/assets/bitmap/sample.jpg

The following are the basic configurations:

context: resolve('src')

output: {
  path: resolve('builds/web'),
  publicPath: '',
  filename: ifProd('[name].[chunkHash].js', '[name].js')
},

...

loaders: [
  {
    test: /\.(png|jpg|jpeg)/,
    loader: 'file-loader?name=[path][name].[ext]?[hash]'
  }
]

I expect an output structure for an image that looks like this:

/builds/web/assets/bitmap/sample.jpg

Instead, I get the following:

/builds/web/src/assets/bitmap/sample.jpg

How do I tell the file loader that the output path should be relative /src, and not /?

Answer 1

2 ( Webpack!) , . context Webpack, , .

:

  use: [{
    loader: 'file-loader',
    options: {
      context: <path>, // The directory to draw relative paths from
      name: '[path][name].[ext]'
    },
  },

, .

, www.website.com/assets/images/user.png, :

project/
├── src/
│   └── assets/
│       └── images/
│           └── user.png
└── build/

:

project/
├── src/
│   └── assets/
│       └── images/
│           └── user.png
└── build/
    └── assets/
        └── images/
            └── user.png

:

  use: [{
    loader: 'file-loader',
    options: {
      context: path.resolve(__dirname, 'src')
      name: '[path][name].[ext]'
    },
  },

, src build.

assets , context : path.resolve(__dirname, 'src/assets'), , 'src/assets', :

project/
├── src/
│   └── assets/
│       └── images/
│           └── user.png
└── build/
    └── images/
        └── user.png