如何在nuxt.config.js中扩展webpack >配置>外部变量？

Question

因此，我需要在Webpack中设置Rollup的external选项(external: path => /^three/.test( path ))的替代选项

据我所知，在webpack中它被称为externals，但我不知道如何在nuxt.config.js的extend (config, ctx) {}中设置它。

config.module.externals = /^three/似乎不起作用，尽管我在webpack的文档中见过这个例子：

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

我在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'
                }
            )
        }

Answer 1

我在几个小时前遇到了同样的问题，这对我来说很有用: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/

因此您不需要添加config.module.external，因为配置本身就是模块化的

    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,
      ];
    },
  },