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?

javascriptvue.jswebpackvue-cli-3

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for executing a specific task using grunt.registerTask()?

My grunt tasks are registered like this - grunt.registerTask('regenerateSources', ['clean:local', 'bower', 'uglify']); When I run grunt regenerateSources, it executes the clean, bower and uglify tasks. But is there ...

javascriptnpmgulpgruntjsmean-stack

What could be causing the issue of why the null check in JavaScript isn't functioning properly

function getProperty(property) { console.log(localStorage[property]) //Displays “null” if(localStorage[property] == null) { console.log('Null check') return false; } return localStorage[property]; } The log outputs "nu ...

javascriptnull

Using Vue.js to dynamically calculate elapsed time

I am attempting to display the changing elapsed time from a specified start time <template> <div class="dashboard-editor-container"> <div class="wrapper__body"> <el-row :gutter="30"> <el-col v-fo ...

javascriptvue.js

Whenever I navigate to this specific route, I consistently encounter an error message in my console

VM28353:1 Error: Unexpected token 'o' found in JSON at position 1 at JSON.parse (<anonymous>) at getUser (auth.js?c7d4:11) at wrappedGetter (vuex.esm-browser.js?5502:335) at Object.eval [as getUser] (vuex.esm-browser.js?5502 ...

javascriptvue.jsvuexvuejs3

The error message "node Unable to iterate over property 'forEach' because it is undefined" appeared

I am facing an error and unable to find the solution. I believe my code is correct. It is related to a video lesson where I attempt to display popular photos from Instagram using the Instagram API. However, when I try to execute it, I encounter this issue. ...

javascriptnode.jsexpress

In order for the Facebook share button to appear, a page reload is required when using Angular

I've been working on integrating Facebook's share plugin, but I've encountered an issue where the share button only shows up after reloading the page. If I navigate to the page through a link or URL, the button doesn't appear until afte ...

javascriptangularjsfacebook

Error: Unable to access the property 'existsSync' since it is undefined - Creating Web Applications using Node.js and Express.js by Ethan Brown - Chapter 13

I am brand new to GitHub and the MEAN (mongodb, express, angular, node.js) stack. I am currently working through a book by Ethan Brown called 'Web Development with Node and Express', and he has provided a Git repository for me to clone and follow ...

javascriptangularjsnode.jsmongodbexpress

Using Strapi and Next.js to retrieve user information

After searching for similar questions with no luck, I'm reaching out for help. Building an authentication system using Strapi and Next.js, I'm faced with a task that seems simple but eludes me. The main question is: How can the client retrieve u ...

javascriptnext.jsstrapi

Guide to setting the value of an object using v-model with a list item

Update: I have identified that the issue lies with the v-model on the initial div, as it is not supported by Vue. Despite this, I am still unsure how to resolve the issue. My objective is to create a file list where each file includes a material selection ...

vue.js

Apply the "ng-class" directive only if there is an <a> element located after the specified element

My issue involves a list of items categorized by labels, with a search filter applied. The problem arises when the labels appear in the search results even though the lists themselves are empty. I need to hide the relevant label if there are no items prese ...

javascriptangularjs

Eliminating blank attributes within an array of objects

I'm currently working on a task that involves creating an array to summarize another array. I've received valuable suggestions from various sources, including this discussion on Stack Overflow. Although the solutions provided are effective, they ...

javascriptarraysobjectkey

jQuery's .html() function does not accept the encoded entity "&amp;"

Whenever I attempt to include a string containing "& (amp)" within the .html() function, it results in an unrecognized expression error. Can you advise me on how to convert the &amp; string or suggest the best method for inserting the desired strin ...

javascriptjquery

"Customize the appearance of a List Element in Material UI by changing

How can I modify the color of a specific material ui list item? <ListItemText primary={mspvar} secondary="buy"> ...

javascriptreactjsmaterial-ui

Despite passing the same dependency to other services, the dependencies in the constructor of an Angular2 Service are still undefined

To successfully integrate the "org-agents-service" into the "org-agents-component," I need to resolve some dependencies related to the required api-service. Other components and services in the hierarchy are also utilizing this api-service, which acts as a ...

angulartypescriptdependency-injectionwebpackangular2-services

Clearing Time Field Input in Safari

Recently, I've been utilizing the following HTML input element: <input type="time"> While testing it in both Chrome and Safari, I noticed that the clear field (cross button) is absent when using Safari. How can I make the cross button appear i ...

javascripthtmlsafari

changing the function of a button dynamically in vuejs depending on the data present

I have a unique scenario in my vuejs sample where I am working on dynamically changing the button based on data from the vue model. For example, if the data returned indicates "video", I want to trigger an alert method. On the other hand, if it says someth ...

vue.js

What steps should I take to resolve a library add error within my Vue.js project?

I am encountering an issue while trying to install the Vuelidate vue library in my existing project. I have tried using the commands npm install --save vuelidate and npm i vuelidate, but I keep getting the following errors. Can someone please assist me? ...

vue.jsvue-routervue-clivuex-modulesvuelidate

How to customize the checkbox color in Material UI?

I've been attempting to adjust the color of checkboxes and radio buttons. After conducting some research, I stumbled upon this helpful link: Material UI change Input's active color Unfortunately, I keep encountering the following error: (0 , _ ...

javascripthtmlcssreactjsmaterial-ui

Trouble arises when attempting to showcase document fields in MongoDB

As a beginner in programming, I am putting in my best effort to figure things out on my own. However, I seem to be stuck without any guidance. I am attempting to display all products from the mongoDB based on their brand. While I have successfully set up a ...

javascriptmongodbexpressmongoosemongodb-query

Navigating through a JavaScript object array within another object

I am looking to iterate through a JavaScript object array Here is my object response: { "kind": "calendar#events", "etag": "\"p3288namrojte20g\"", "summary": "pedicura", "updated": "2019-05-01T14:25:51.642Z", "timeZone": "America/Argentina ...

javascriptarraysobject