Remove .html extension from url

[microlabig]

Good afternoon!

I am using your plugin for a multi-page application. In dev-server mode, .html extensions are displayed in the browser url. My dev-config:

{
  mode: 'development',

  devtool: 'eval-source-map',

  entry: {
    'de/index': '/home/user/src/pug/pages/index.pug?lang=de',
    index: '/home/user/src/pug/pages/index.pug?lang=en',
    'de/pricing': '/home/user/src/pug/pages/pricing.pug?lang=de',
    pricing: '/home/user/src/pug/pages/pricing.pug?lang=en',
  },

  output: {
      path: '/home/user/public',
      publicPath: '/',
      clean: true,
  },

  devServer: {
    port: 8081,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    open: true,
    watchFiles: {
      paths: [`home/user/src/**/*.*`],
      options: {
        usePolling: true,
      },
    },
    static: {
      staticOptions: {
        extensions: ['html', 'htm'],
      },
    },
  },

  plugins: [
    new PugPlugin({
      pretty: true, // enable formatting of HTML
      js: {
        // since pug-plugin v4.6.0 place filename for JS here
        filename: 'assets/js/[name].[fullhash].js',
      },
      // since pug-plugin v4.6.0 the 'extractCss' option is renamed to 'css'
      css: {
        filename: 'assets/css/[name].[contenthash].css',
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: PugPlugin.loader,
            options: {
              data: {
                process: { env: process.env }, // variables environment
              },
            },
          },
        ],
      },
    ],
  },
};  

static.staticOptions.extensions does not work with pug-plugin.

Is it possible to configure devServer + pug-plugin so that in development mode you do not have to work with the .html extension in the address bar?

dependencies:

"pug-plugin": "^4.9.7",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",

Thank you in advance!

[webdiscus]

Hello @microlabig

if you want to navigate to a web page without the .html extension, then according to web standards, you should create a directory with the desired name and place the index.html file in this directory.

entry: {
    'de/index': '/home/user/src/pug/pages/index.pug?lang=de', // => dist/de/index.html (web path: de/)
    index: '/home/user/src/pug/pages/index.pug?lang=en', // => dist/index.html (web path: /)
    'de/pricing/index': '/home/user/src/pug/pages/pricing.pug?lang=de', // => dist/de/pricing/index.html (web path: de/pricing/)
    'pricing/index': '/home/user/src/pug/pages/pricing.pug?lang=en', // => dist/pricing/index.html (web path: pricing/)
  },

[microlabig]

The only point is that the query-parameters (from new URLSearchParams) do not work. I will think further