Update documentation to reflect Webpack v4

[alanyinjs]

Documentation Is:

• [ ] Missing
• [x] Needed
• [ ] Confusing
• [ ] Not Sure?

Please Explain in Detail...

The doc for file-loader has referred to the style recommended by Webpack 3 in multiple places where instead of using use, and specify loader and options inside the use object, loader and options have been used directly inside rules.

Your Proposal for Changes

Just an example of how the above could possibly be changed:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

[alexander-akait]

@alanyinjs both examples valid for webpack@3, webpack@4 and webpack@5, you need use property when you want using multiple loaders, like:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'other-loader',
            options: {
              // ...options
            },
          },
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

[alanyinjs]

@evilebottnawi Thanks Evilbot for the quick reply! I understand the it will still be valid syntax without the use property. However the official docs seem to be recommending using use even for a single loader: https://webpack.js.org/loaders/babel-loader/

[alexander-akait]

@alanyinjs hm, let's update docs