How can I configure Vue-CLI 3 to produce a page without JavaScript?

Question

I have a static page that doesn't need JavaScript. I'm using vue-cli 3 and would like to pass the HTML file through webpack for the purpose of minification. However, this doesn't seem to be possible. Inside vue.config.js, I have this:

module.exports = {
  pages: {
    static_page: {
      template: "./public/static_page.html",
      entry: ""
    }
  }
};

Of course, this fails because entry is required and cannot be empty. Simply placing the file into public will cause vue-cli to copy the file into dist unchanged. This is OK but it's not minified. So how can I tell vue-cli to process a HTML file without JavaScript?

Answer 1

I had to manually invoke the HTML Webpack Plugin. Here's my vue.config.js

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

module.exports = {
    configureWebpack: {
        plugins: [
            new HtmlWebpackPlugin({
                template: "./public/static_page.html",
                filename: "static_page.html",
                chunks: [],
                minify: {
                    collapseWhitespace: true,
                    removeComments: true,
                    removeRedundantAttributes: true,
                    removeScriptTypeAttributes: true,
                    removeStyleLinkTypeAttributes: true,
                    useShortDoctype: true
                }
            })
        ]
    }
};

Vue CLI is still copying the file from public to dist unchanged as it would with any other static asset. HTML Webpack Plugin is overwriting this file with the minified version.

Also, setting the minify option to true doesn't seem to do anything. The options have to be listed out explicitly. See Issue #1094.

Another useful link is the list of HTML Webpack Plugin options.