How Can I Add New Rules To Loaders While Using Vue Cli 3.x

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 fa

Solution 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')
  }

}