Vue Cli 3 исключает ввод текста в файле index.html.

Question

Я создал проект машинописного текста проекта с помощью Vue Cli.

Я хочу иметь отдельный файл commands.html, который должен содержать код JavaScript из файла commands.ts.

Я поместил файл 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. Putтег сценария в файле commands.html, указывающий на сгенерированный файл JavaScript

Я попробовал следующее:

Я установил 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,
        },
      }),
    ],
  },
};

Это все делает правильно, но он также создает тег сценария вe index.html файл, который указывает на сгенерированный файл JavaScript.Я думаю, что стандартная конфигурация Webpack для Vue компилирует commands.ts в пакете, который вводится в файл index.html.Как я могу остановить это от этого?

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;
      });
  },
};