2

我想创建一个自定义块并附加在生成的 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();
4

1 回答 1

2

如果您只是想创建一个新块，则添加另一个入口点。现在输出目录中有两个文件可用。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'),
  },
  ....

也可以在vue中命名要导入的chunk

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 插件结合使用

  ...
  new HtmlWebpackPlugin({
    title: 'Vue App',
    template: './src/template.html',
    filename: 'index.html',
    chunks: ['index', 'utiltest'],
  }),
于 2020-06-29T06:27:01.777 回答