How can I add new rules to loaders while using VUE CLI 3.x

Question

In the last couple of days I have tried to refer a HTML page inside Vue-router, but no matter what I have tried, the only thing I got back is the following error:

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

I have already attempt many different stack responses to fix it, but most of them actually requires to add an extra rule inside webpack.config.js.

{
  test: /\.(html)$/,
  use: {
    loader: "html-loader",
    options: {
      attrs: [":data-src"]
}

However in the latest version of Vue CLI, it looks like this file is not available anymore.

The HTML page is placed in the public/static directory, so it is running fine when I access it from localhost:8080/static/home.html, but my goal is to access it as my home page (using localhost:8080/ only) .

So far I have already installed both html-loader and vue-loader and yet no sign of success.

P.S. I have tried to convert this HTML file and its complementary files (css, fonts and js) into a component, but I had no success as well.

Answer 1

Vue CLI uses webpack-chain internally for maintaining the Webpack config, and so to configure it you need to add a vue.config.js file to your project (in place of this webpack.config.js).

And to configure the loaders you will need the following (inside the vue.config.js), of course with the html-loader package also installed:

module.exports = {

  chainWebpack: config => {
    config.module
      .rule('html')
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')
  }

}