I need to configure Webpack to accept and handle PDF files with url-loader via the Vue Cli (latest).

vue.config.js

module.exports = {
  configureWebpack: {
    rules: [
      {
        test: /\.(pdf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'files/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

Does the above look correct or am I missing something? The docs on this are here: .md#basic-configuration

I get the error:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. Configuration has an unknown property 'rules'.

I'm obviously missing something in my understanding here about how to augment the generated Webpack config in Vue.

Help appreciated! Thanks

I need to configure Webpack to accept and handle PDF files with url-loader via the Vue Cli (latest).

vue.config.js

module.exports = {
  configureWebpack: {
    rules: [
      {
        test: /\.(pdf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'files/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

Does the above look correct or am I missing something? The docs on this are here: https://github./vuejs/vue-cli/blob/dev/docs/webpack.md#basic-configuration

I get the error:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. Configuration has an unknown property 'rules'.

I'm obviously missing something in my understanding here about how to augment the generated Webpack config in Vue.

Help appreciated! Thanks

• javascript
• webpack
• vue.js
• vue-cli

Share Improve this question Follow asked Mar 2, 2018 at 10:55 Michael Giovanni PumoMichael Giovanni Pumo 14.8k1818 gold badges9999 silver badges145145 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Turns out, I was missing another level for the rules array.

module: {}

So it should be in full:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(pdf)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                name: 'files/[name].[hash:8].[ext]'
              }
            }
          ]
        }
      ]
    }
  }
}

My bad! Hopefully this helps someone out there.

For coffeescript and vue-cli version 3, I needed to npm install -D coffee-loader and then create this file as vue.config.js:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.coffee$/,
          use: [
            {
              loader: 'coffee-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        }
      ]
    }
  }
}