How to extend webpack config?

You can extend nuxt's webpack configuration via the extend option in your nuxt.config.js. The extend option of the build property is a method that accepts two arguments. The first argument is the webpack config object exported from nuxt's webpack config. The second parameter is a context object with the following boolean properties: { isDev, isClient, isServer, loaders }.

export default {
  build: {
     extend (config, { isDev, isClient }) {
       // ..
            test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: 'file-loader',
        // Sets webpack's mode to development if `isDev` is true.
        if (isDev) config.mode = 'development'

The extend method gets called twice - Once for the client bundle and the other for the server bundle.

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!