Vuejs Webpack Template Split Vendor CSS

Dec 20, 2017

If you are using vuejs-templates/webpack, the production build (npm run build) will create 3 JavaScript files (app.[hash].js, vendor.[hash].js, manifest.[hash].js) while there is only 1 CSS file (app.[hash].css).

I would like to create 2 CSS files (app.[hash].css and vendor.[hash].css).

Note: Why need separate vendor.[hash].css? Assuming vendor.[hash].css (CSS from npm packages) changes less often than my app.[hash].css, thus could be cached longer on webserver as I made changes to my app's CSS.

To enable generation of vendor.[hash].css, edit build/webpack.prod.conf.js in your project directory.

Observer // EDIT: comment for changes.

...const webpackConfig = merge(baseWebpackConfig, {  ...  plugins: [    ...    new webpack.optimize.CommonsChunkPlugin({      name: 'vendor',      minChunks: function (module) {        // any required modules inside node_modules are extracted to vendor        return (          module.resource &&          // EDIT: Enable vendor.css as well          /\.(js|css|sass|scss|less)$/.test(module.resource) &&          // /\.js$/.test(module.resource) &&          module.resource.indexOf(            path.join(__dirname, '../node_modules')          ) === 0        )      }    }),    ...  ]})    

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.