build target lib should merge externals in vue.config

[mattwmj]

What problem does this feature solve?

I find that if build with vue-cli-service build --target lib, externals in vue.config.js is ignored.
Dig into the vue-cli source I find below code in resolveLibConfig.js which ignores externals in vue.config.js.
Is this intended or not?

    // externalize Vue in case user imports it
    config
        .externals({
            vue: {
                commonjs: 'vue',
                commonjs2: 'vue',
                root: 'Vue'
            }
        })

What does the proposed API look like?

// externalize Vue in case user imports it
        config
            .externals({
                ...config.get('externals')
                vue: {
                    commonjs: 'vue',
                    commonjs2: 'vue',
                    root: 'Vue'
                }
            }) 

[LinusBorg]

Thanks, this looks like a bug. Up for a PR?

[mattwmj]

@LinusBorg Thanks. I am not quite familiar with the PR thing yet. I tried to create #2653 . Please review it and give me some suggestions.

[LinusBorg]

This looks good :)

[LinusBorg]

Congrats on your first contribution.

[rikbrowning]

Sorry to comment on an old issue but the fix does not work if your webpack externals is an array of options.
The use of the spread operator here converts the incoming array to an object:

{ '0': [Function],
  '1': [Function],
  vue: { commonjs: 'vue', commonjs2: 'vue', root: 'Vue' } }

Which then breaks when we try to validate the webpack config.

[LinusBorg]

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

The externals option doesn't accept an array.

[rikbrowning]

https://webpack.js.org/configuration/externals/#combining-syntaxes

When trying to combine types you can use an array

[LinusBorg]

Now would be a good time to provide the actual code you have issues with

[rikbrowning]

Hey, so I use the webpack-node-externals package to manage my externals and a custom function for assets:

const getExternals = () => {
  if  (process.env.NODE_ENV === "development"){
    return [];
  }
  return [
    nodeExternals(),
    (c, request, cb) => {
      if (/\/assets\//.test(request)){
        const index = request.indexOf("/assets/");
        const newRequest = `.${request.substring(index)}`;
        return cb(null, `commonjs ${newRequest}`);
      }
      return cb();
    }];
};

const externals = config => {
  config.externals(getExternals());
};

I then modify webpack via the chaining technique. As you can see I use the array syntax for having multiple custom functions which will not work with the spread operator.

Sorry my delayed response.