vue cli 如何创建自定义块并挂钩 index.html？

Question

我想创建一个自定义块并附加到生成的 index.html 中。我使用 vue create . 创建了一个自定义项目并添加了一个 vue.config.js 文件。

vue.config.js

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

我在 src/utils/test 中有一些实用函数，我想为其创建一个单独的包并附加到 index.html 中。像这样

<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>

但是在生成的 index.html 文件中它没有为 utiltest 创建块，它只有这 2

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

注意：我在我的 main.js 中导入了来自 utils/test 的函数，比如

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

Answer 1

如果您只是想创建一个新块，您可以添加另一个入口点。现在输出目录中有两个文件可用。 public/index.js 和 public/untiltest.js.

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

你也可以name the chunks你想在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
})

在普通的 html 文件中，您还可以将其与 html webpack plugin

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

vue cli 如何创建自定义块并挂钩 index.html？

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

vue.js

webpack

webpack-splitchunks