vue cli how to create a custom chunk and hook in index.html?

Question

I want to create a custom chunk and attach in generated index.html. I created a custom project using vue create . and added a vue.config.js file.

vue.config.js

module.exports = {
  lintOnSave: true,
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          utiltest: {
            name: 'utiltest',
            test: /utils[\\/]test/,
            priority: -30,
            chunks: 'initial',
          },
        },
      },
    },
  },
};

I have some util functions in src/utils/test for which I want to create a separate bundle and attach in index.html. Like this

<script type="text/javascript" src="/js/chunk-utiltest.js"></script>
<script type="text/javascript" src="/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/js/app.js"></script>

But in generated index.html file its not creating the chunk for utiltest, it has just these 2

<script type="text/javascript" src="/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/js/app.js"></script>

Note: I am importing functions from utils/test in my main.js like

import testHook from '@/utils/test';
...
testHook();

Answer 1

If you simply want to create a new chunk, you add another entry point. Now two files are available in the output directory. public/index.js and public/untiltest.js.

module.exports = (env, options) => ({
  entry: {
    index: './src/index',
    utiltest: './src/utiltest',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
  },
  ....
  

You can also name the chunks you want to import in vue

const routeOptions = [
  { path: '/', name: 'Home' },
  { path: '/about', name: 'About' },
  { path: '/login', name: 'Login' }
]

const routes = routeOptions.map(route => {
  return {
    ...route,
    component: () => import(/* webpackChunkName: "[request]" */ `../views/${route.name}.vue`)
  }
})

const router = new VueRouter({
  routes
})

In a normal html file, you could also combine this with the html webpack plugin

  ...
  new HtmlWebpackPlugin({
    title: 'Vue App',
    template: './src/template.html',
    filename: 'index.html',
    chunks: ['index', 'utiltest'],
  }),