Is the CDN example correct?

[ZebraFlesh]

Documentation Is:

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

Please Explain in Detail...

The source code in the CDN example of the readme is:

webpack.config.js

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext][query]',
            },
          },
        ],
      },
    ],
  },
};

This implies that the output.publicPath option is picked up by file-loader when it lacks its own publicPath. So far I haven't been able to get this to work, but when I expand the file-loader options to:

options: {
  name: '[path][name].[ext][query]',
  publicPath: 'https://cdn.example.com/',
},

everything works as expected.

Your Proposal for Changes

Not sure if this is a code bug or a documentation bug. Looking at the code, I don't see how the the publicPath option can be omitted from the file-loader options and have the expected outcome (unless there's some nuance to loaderUtils.getOptions(this) which would obtain the webpack output options that I don't understand). So this seems like a documentation issue and publicPath needs to be repeated in the file-loader options:

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext][query]',
              publicPath: 'https://cdn.example.com/',  // suggested change
            },
          },
        ],
      },
    ],
  },
};

[alexander-akait]

Yes, correct, because by default loader uses built-in __webpack_public_path__ variable and it is output.publicPath

[carlosmaniero]

@evilebottnawi, Is it a design goal to does not have output.publicPath as fallback?

Other loaders such as css-loader works this way.