How to exclude CommonJS libs from production build with Webpack (vue-cli)

Question

I have managed to do that for vue by using Webpack config externals

First I included the CDN for Vue in my html file

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Then I modified my webpack config

vue.config.js

module.exports = {
  configureWebpack: {
    // ...
    externals: {
      vue: 'Vue',
    }
    // ...
  },
}

Things worked perfectly.

But when I tried with vue-class-component and vue-property-decorator, it didn't not worked as expected

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

vue.config.js

module.exports = {
  configureWebpack: {
    // ...
    externals: {
      vue: 'Vue',
      'vue-class-component': 'VueClassComponent',
      'vue-property-decorator': 'VuePropertyDecorator',
    }
    // ...
  },
}

I noticed that the names of these files are different, end with .common.js and .umd.js

vue-class-component.common.js
vue-property-decorator.umd.js

Then I tried

vue.config.js

module.exports = {
  configureWebpack: {
    // ...
    externals: {
      vue: 'Vue',
      'vue-class-component': 'commonjs2 vue-class-component',
      'vue-property-decorator': 'umd vue-property-decorator',
    }
    // ...
  },
}

But it did not work as well

Below are how I import these in my src/. Scripts are written in typescript

import Vue from 'vue'

// ...

import { Component } from 'vue-property-decorator'

Anyone knows how to handle externals in webpack with .common.js and .umd.js? Many thanks!

"it didn't not worked as expected" ....what that mean exactly? — Michal Levý
@MichalLevý sorry for not being clear enough, it means that my app crashed — hgb123

Michal Levý Michal Levý · Accepted Answer · 2020-09-19T11:12:08

I don't think problem is necessarily in Webpack config...

If I try to load https://cdn.jsdelivr.net/npm/[email protected] it gives me Original file: /npm/[email protected]/dist/vue-class-component.common.js which is CommonJS build - browser will not handle that. Try use link to a "browser compatible" build like https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-class-component.min.js

vue-property-decorator should be fine as UMD module should work in the browser...

BTW whats the point of all this? Why not let Webpack do its thing ? Its always better do download one big JS file then multiple smaller...

How to exclude CommonJS libs from production build with Webpack (vue-cli)

1 Answers