Question

我用Vue Cli创建了一个项目打字稿项目。

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

我将commands.html文件放在public文件夹中，因此在构建项目时将其复制到dist文件夹中。

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

Webpack应该执行以下操作：

缩小commands.html文件（就像缩小index.html一样）
将commands.ts文件编译为JavaScript
将生成的JavaScript文件放入dist/js文件夹
在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,
        },
      }),
    ],
  },
};

这可以正确地完成所有操作，但是它还会在index.html文件中创建一个脚本标记，该标记指向生成的JavaScript文件。我认为Vue的默认Webpack配置正在编译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;
      });
  },
};

Vue Cli 3排除打字稿文件被注入index.html

1 个答案: