CODEWITHSUNDEEP
javascriptvue.jswebpacknuxt.jsrollupjs
s0up
s0up

Reputation: 422

How to extend webpack > config > externals in nuxt.config.js?

So I need to set the alternative to Rollup's external option (external: path => /^three/.test( path )) in Webpack

As I understand in webpack it's called externals, but I don't know how to set it in extend (config, ctx) {} in nuxt.config.js.

config.module.externals = /^three/ doesn't seem to work, even though in webpack docs I've seen this example:

module.exports = {
  //...
  externals: /^(jquery|\$)$/i
};

My config in nuxt.config.js:

        /*
        ** You can extend webpack config here
        */
        extend (config, ctx) {
            config.module.rules.push(
                {
                    test: /\.(glsl|vs|fs|vert|frag)$/,
                    exclude: /node_modules/,
                    use: 'raw-loader'
                }
            )
        }

Upvotes: 4

Views: 3606

Answers (1)

Haxtor.ID
Haxtor.ID

Reputation: 103

I come to this since have same issue a hours ago, and this work for me :D

build: {
    extend(config, { isDev, isClient }) {
      config.externals = function (context, request, callback) {
        if (/xlsx|canvg|pdfmake/.test(request)) {
          return callback(null, 'commonjs ' + request)
        }
        callback()
      }
    },
  },

https://webpack.js.org/configuration/externals/

so you don't need add config.module.external because the config is module it self

    build: {

      extend(config, { isDev, isClient }) {
        config.externals = [
          {
            // String
            react: 'react',
            // Object
            lodash: {
              commonjs: 'lodash',
              amd: 'lodash',
              root: '_', // indicates global variable
            },
            // [string]
            subtract: ['./math', 'subtract'],
          },
          // Function
          function ({ context, request }, callback) {
            if (/^yourregex$/.test(request)) {
              return callback(null, 'commonjs ' + request);
            }
            callback();
          },
          // Regex
          /^(jquery|\$)$/i,
      ];
    },
  },

Upvotes: 3

Related Questions