Vue Cli 3 exclude typescript file from being injected in index.html

Question

I created a project typescript project with the Vue Cli.

I want to have a separated commands.html file that should contain the javascript code from a commands.ts file.

I put the commands.html file in the public folder, so it is copied to the dist folder when building the project.

The commands.ts file is in the root folder (in the same folder in that the public, src, node_modules, etc folders are).

Webpack should do the following:

Minify the commands.html file (like it is minifying the index.html)
Compile the commands.ts file to JavaScript
Put the generated JavaScript file to the dist/js folder
Put a script tag in the commands.html file that points to the generated JavaScript file

I tried the following:

I installed html-webpack-plugin

I created a vue.config.js file with the following code:

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

That is doing everything correctly, but it also creates a script tag in the index.html file that points to the generated JavaScript file. I think the default Webpack config of Vue is compiling the commands.ts in the bundle that is injected in the index.html file. How can I stop it from doing that?

have you tried the "files" option as used in the examples here: github.com/jantimon/html-webpack-plugin#options You can specify which JS files or whatever files, may help. — Michael
– Michael, Commented May 26, 2019 at 7:00

juliushuck · Accepted Answer · 2019-05-26 14:40:38Z

1

Found it out:

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

answered May 26, 2019 at 14:40

juliushuck

1,8021 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Cli 3 exclude typescript file from being injected in index.html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related