Webpack: How to use cdn for prod over the vendor bundle

[shirotech]

When I run npm run build, it generates an index.html file with:

<script type=text/javascript src=/static/js/vendor.cfc7b832dc673a04b010.js></script>

However I would like it to do:

<script type=text/javascript src=//unpkg.com/[name]@[version]/[filename]></script>
<script type=text/javascript src=//unpkg.com/[name]@[version]/[filename]></script>
<script type=text/javascript src=//unpkg.com/[name]@[version]/[filename]></script>

Is this possible with webpack?

[LinusBorg]

you should look into the "externals" option of webpack. That will keep these depencencies out of the bundle.

But you would have to add them to index.html yourself.

[shirotech]

I'm aware of the feature, but want to automate and do this only in prod. Using the externals require modification to the index.html file directly which affects both dev and prod.

[LinusBorg]

I'm not aware of any webpack plugin or similar tool that will do this for you, so I don't think we can easily make this possible in this template.

Maybe ask on our forum.vuejs.org to see what other people can come up with.

[shirotech]

@LinusBorg If that's the case, than I have just wrote a plugin to do this https://github.com/van-nguyen/webpack-cdn-plugin

I hope people in the same boat as me will find it useful :)

[shirotech]

@LinusBorg I have made a pull request for this, can you please take a look? https://github.com/vuejs-templates/webpack/pull/737

Cheers.

[ravimittal84]

html-webpack-externals-plugin can be used for this.

Here's how I used it:

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
plugins: [
  new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'vue',
          entry: 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js',
          global: 'Vue',
        },
      ],
    }),
  // other plugins
]

[YevheniiHerasymchuk]

is it possible to do it for node env?
I mean, for example, if I have var moment = require('moment'); console.log(moment().format() and in plugin I should set to use moment library not from node_modules but from cdn url