CODEWITHSUNDEEP
vue.jswebpackvuejs2vue-cli
juliushuck
juliushuck

Reputation: 1684

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

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:

  1. Minify the commands.html file (like it is minifying the index.html)
  2. Compile the commands.ts file to JavaScript
  3. Put the generated JavaScript file to the dist/js folder
  4. 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?

Upvotes: 1

Views: 959

Answers (1)

juliushuck
juliushuck

Reputation: 1684

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

Upvotes: 1

Related Questions