Vue Cli 3 将 typescript 文件排除在 index.html 中

Question

我使用 Vue Cli 创建了一个项目 typescript 项目。

我想要一个单独的 commands.html 文件，其中应包含来自 commands.ts 文件的 javascript 代码。

我把commands.html文件放在public文件夹下，所以在构建项目的时候复制到dist文件夹下。

commands.ts 文件位于根文件夹中（与 public、src、node_modules 等文件夹位于同一文件夹中）。

Webpack 应该做以下事情：

1. 缩小commands.html 文件（就像缩小index.html 一样）
2. 将commands.ts文件编译成JavaScript
3. 将生成的JavaScript文件放到dist/js文件夹中
4. 在指向生成的 JavaScript 文件的commands.html 文件中放置一个脚本标签

我尝试了以下方法：

我安装了html-webpack-plugin

我使用以下代码创建了一个vue.config.js 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: {
    entry: {
      commands: './commands.ts',
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'commands.html',
        template: './public/commands.html',
        chunks: ['commands'],
        minify: {
          collapseWhitespace: true,
        },
      }),
    ],
  },
};

这一切都是正确的，但它还在index.html 文件中创建了一个脚本标记，该标记指向生成的JavaScript 文件。我认为 Vue 的默认 Webpack 配置正在编译注入到 index.html 文件中的包中的 commands.ts。我怎样才能阻止它这样做？

Answer 1

发现了：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: {
    entry: {
      functionFile: './functionFile.ts',
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'functionFile.html',
        template: './public/functionFile.html',
        chunks: ['functionFile'],
        minify: {
          collapseWhitespace: true,
        },
      }),
    ],
    devServer: {
      https: true,
    },
  },
  chainWebpack: (config) => {
    config
      .plugin('html')
      .tap((args) => {
        // eslint-disable-next-line no-param-reassign
        args[0].excludeChunks = ['functionFile'];
        return args;
      });
  },
};