What steps do I need to take to set up Vue-CLI 3 to generate a webpage with no JavaScript?

Question

What steps do I need to take to set up Vue-CLI 3 to generate a webpage with no JavaScript?

My dilemma is this: I have a simple static page that does not require JavaScript. Using vue-cli 3, I am attempting to pass the HTML file through webpack for minification purposes. Unfortunately, it seems that accomplishing this task is not as straightforward as expected. Inside the vue.config.js file, my configuration looks like this:

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

Naturally, this setup fails because the entry field is mandatory and cannot be left empty. Placing the HTML file directly into the public directory results in vue-cli simply copying the file to the dist folder without any processing or minification. While this behavior works, it does not meet my goal of minifying the HTML file. So, the question remains - how can I instruct vue-cli to process an HTML file that does not contain JavaScript code?

javascript vue.js webpack vue-cli-3

Answer 1

Answer №1

I found a solution by manually calling on the HTML Webpack Plugin in my vue.config.js file:

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

Despite Vue CLI naturally copying files from public into dist, the HTML Webpack Plugin steps in to replace the original with a minified version.

It should be noted that setting the minify option to true does not appear to have an effect. Instead, each individual option must be specified. Check out Issue #1094 for more details.

For additional information, here is a reference to the various HTML Webpack Plugin options.

Answer 2

I found a solution by manually calling on the HTML Webpack Plugin in my vue.config.js file:

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

Despite Vue CLI naturally copying files from public into dist, the HTML Webpack Plugin steps in to replace the original with a minified version.

It should be noted that setting the minify option to true does not appear to have an effect. Instead, each individual option must be specified. Check out Issue #1094 for more details.

For additional information, here is a reference to the various HTML Webpack Plugin options.

What steps do I need to take to set up Vue-CLI 3 to generate a webpage with no JavaScript?

Answer №1

Similar questions

Understanding how to utilize and manipulate this JSON data using JavaScript

Use ajax to dynamically update the contents of a textbox

A guide on installing a npm dependency module from a local registry domain

Access to a custom Google Map via an API connection

React Application for Multiple Tenants

Reactjs error: Invariant Violation - Two different nodes with the matching `data-reactid` of .0.5

Identifying a particular pattern in a JavaScript string

I encountered an issue when trying to dynamically add a text field in Angular 2. The error message received was "ERROR TypeError: Cannot read property '0' of

Guidelines on declining a pledge in NativeScript with Angular 2

All-in-one Angular script and data housed within a single document

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

Encountering Server Error 500 while trying to deploy NodeJS Express application on GCP App Engine

Refreshing a data object that is shared among Vue components

not getting any notifications from PHP

Is it possible to modify or delete the question mark in a URL?

Generate a dynamic HTML table using an array of objects

Listcell XUL with button options

Send data containing special characters through a GET request in PHP

Utilizing Material UI Grid spacing in ReactJS

Unexpected unhandled_exception_processor in Google Chrome