Path to the js file with hash in generated html #12

AndreyGudin · 2022-02-19T13:00:31Z

AndreyGudin
Feb 19, 2022

[Question]

Can pug-plugin resolve the path to the js file with name with hash and put it in to head of html file? Or does it needs another module, maybe babel?

webdiscus · 2022-02-19T13:18:32Z

webdiscus
Feb 19, 2022
Maintainer

Currently the plugin can't do that, but it's on the TODO list.
This feature is in high demand and later I'll do that.

There are so-called "asset manifest plugins" that replace normal filename with hashed version.

0 replies

AndreyGudin · 2022-02-19T13:40:29Z

AndreyGudin
Feb 19, 2022
Author

I understand, thank you

0 replies

webdiscus · 2022-04-02T19:15:09Z

webdiscus
Apr 2, 2022
Maintainer

Hello @AndreyGudin,

I have good news, finally the resolving of scripts in pug is realized :-)

The new version ^2.0.0 supports the require() of styles and scripts directly in pug without having to define them in a webpack entry.

html
  head
    link(rel='stylesheet' href=require('./styles.scss'))
    script(src=require('./main.js'))
  body

Output:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/css/styles.05e4dd86.css">
    <script src="/assets/js/main.f4b855d8.js"></script>
  </head>
  <body></body>
</html>

webpack.config.js

const PugPlugin = require('pug-plugin');
module.exports = {
  output: {
    publicPath: '/',
    // js output filename 
    filename: 'assets/js/[name].[contenthash:8].js',
  },
  entry: {
    // all scripts and styles can be defined directly in pug
    'index': './src/index.pug',
  },
  plugins: [
    new PugPlugin({
      modules: [
        PugPlugin.extractCss({
          // css output filename 
          filename: 'assets/css/[name].[contenthash:8].css',
        }),
      ],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(pug)$/,
        loader: PugPlugin.loader,
        options: {
          method: 'render',
        }
      },
      {
        test: /\.scss$/i,
        use: ['css-loader', 'scss-loader'],
      },
    ],
  },
};

See the test case.

0 replies

webdiscus · 2022-04-02T19:17:05Z

webdiscus
Apr 2, 2022
Maintainer

@AndreyGudin can you please test in your project whether it works for you?

0 replies

AndreyGudin · 2022-04-03T10:31:57Z

AndreyGudin
Apr 3, 2022
Author

Hi @webdiscus. It's working in my project.

<!DOCTYPE html><html lang="ru"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="style.css" rel="stylesheet"><script type="module" src="pages/main/scripts.js"></script>

module.exports={
  mode: mode,
  output:{
    filename:'pages/[name]/scripts.js',
    path:path.resolve(__dirname,'shelter'),
    publicPath:'',
    assetModuleFilename:'assets/[hash][ext][query]',
    clean: true,
  },
  entry:{
    'main/index':'./src/pages/main/main.pug',
    'pages/main/style':'./src/pages/main/main.scss',
    'our-pets/index':'./src/pages/our-pets/our-pets.pug',
    'pages/our-pets/style':'./src/pages/our-pets/our-pets.scss',
  },
  devServer: {
    open: true,
    watchFiles:['src/**'],
    static: {
      directory: path.resolve(__dirname, './shelter/pages'),
    }
  },
  devtool: 'source-map',
  plugins:[
    new PugPlugin({
      modules:[
        PugPlugin.extractCss({
          filename: '[name].css',
          postprocess:(content) =>{
            return content.replace(/assets/g,'../../assets');
          }
        }),
        { 
          test: /\.pug$/,
          outputPath:'shelter/pages/',
          postprocess:(content) =>{
            return content.replace(/assets/g,'../../assets');
          }
        }
      ]
    })
  ],
  module: {
    rules:[
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
        options:{
          method: 'render',
        },
      },
      {
        test: /\.scss$/,
        use:[
          "css-loader","sass-loader"
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type:'asset/resource',
        exclude: path.resolve(__dirname, './src/fonts'),
        generator: {
          filename: 'assets/img/[hash][ext][query]'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
        type:'asset/resource',
        include: path.resolve(__dirname, './src/fonts'),
        generator: {
          filename: 'assets/fonts/[hash][ext][query]'
        }
      },
    ]
  },
};

There is a problem, for example, if the js file is in the same directory as the html file, then the path becomes invalid. But anyway, this is great work.! Thanks!

0 replies

webdiscus · 2022-04-03T18:39:51Z

webdiscus
Apr 3, 2022
Maintainer

Hello @AndreyGudin,

can you please create a simple repo with the reproducible problem and describe in readme what is expected as correct result.

instead of the filename replacing in postprocess you can use the option filename as function to modify the output filename:

filename: (pathData, assetInfo) {
  if (something) {
     return 'some/path/to/filename'
  }
  pathData.filename; // original filename
}

The structure of pathData see here.

the template substitution [name] for required styles/scripts in pug is the base name of required file, the [name] of the ./src/pages/about/script.js is script.

Tipp, to use a specific output name:

define specific base filename, e.g. ./src/pages/about/about.js
define a custom path in option filename, e.g.: filename: 'pages/[name]/scripts.[contenthash:4].js'

script(src=require(`./src/pages/about/about.js`))

output

<script src="/pages/about/scripts.80da.js">

recommended use the absolute pablicPath, started with /, then an asset path in HTML will be always correct.

You can see the test case options-outputpath. Here is the example how generate scripts and styles in same directory as the html file. In the expected directory see the generated files: html, js, css - all in same dir.

P.S. I have the idea to use the [name] as webpack entry name of issuer file instead of the base name of an asset.

output: {
  path: path.join(__dirname, 'public/'),
  filename: 'pages/[name].js',
},
entry: {
  'about/index': './src/pages/about/main.pug'
},
plugins: [
  new PugPlugin({
    modules: [
      ...
      {
        test: /\.pug$/,
        outputPath: 'pages/', // relative by the webpack output.path
      },
    ],
  }),
],

./src/pages/about/main.pug

script(src=require(`./src/pages/about/scripts.js`))

then the output files:

pages/about/index.html
pages/about/index.js

What do you think about this?
What should be the [name]: the base name of source file or the key-name of wepack entry?

0 replies

webdiscus · 2022-04-03T18:48:12Z

webdiscus
Apr 3, 2022
Maintainer

Yet one thing..
I have fixed the option outputPath in version 2.0.1. Now if the outputPath is relative then the output path is relative by webpack output.path. In older versions was supported only absolute path.

0 replies

AndreyGudin · 2022-04-09T14:41:55Z

AndreyGudin
Apr 9, 2022
Author

HI @webdiscus. Sorry for delay. Files index.html and script.js are in one folder, but path in head of index.html is:

src="pages/main/scripts.js"></script>

I expected

src="scripts.js"></script>

What should be the [name]: the base name of source file or the key-name of wepack entry?

I think the key-name of webpack entry is fine, less confusion. By default, it is the key-name of webpack entry in all plugins.

0 replies

webdiscus · 2022-04-18T22:26:47Z

webdiscus
Apr 18, 2022
Maintainer

Hello @AndreyGudin

HI @webdiscus. Sorry for delay. Files index.html and script.js are in one folder, but path in head of index.html is:
src="pages/main/scripts.js"></script>
I expected
src="scripts.js"></script>

The pug-plugin do not affect on script filename. It is defined in output. publicPath and output.filename.
In index.html is the output filename of the script, generated by webpack.output options.

If the generated output filename is pages/main/scripts.js so will be in script src. Other is not possible ;-)
Please define output.publicPath as root /, then the filename will be correct works <script src="/pages/main/scripts.js"></script>

What should be the [name]: the base name of source file or the key-name of wepack entry?

I think the key-name of webpack entry is fine, less confusion. By default, it is the key-name of webpack entry in all plugins.

That would "nice to have", but has many problems by realisation.

For example, we have one entry-point with the name page/home:

entry: {
  'page/home': './src/pages/home/index.pug',
}

This pug file contains more scripts from different folder but with same filename.
Then output filename for all required scripts in the pug will be same:

script(src=require(`./src/pages/home/index.js`)) -> page/home/index.js
script(src=require(`./src/scripts/libs/gallery/index.js`)) -> page/home/index.1.js (sufix `.1` is for an unique file)

It will be even more confusion than it is now.
Аnyway, in the output options is the function filename(pathData).
The argument pathData contains path of the js source file and the path of the issuer (pug).
You can use these paths to generate your own output filename.
So, currently this stay as is.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Path to the js file with hash in generated html #12

{{title}}

Replies: 9 comments

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Path to the js file with hash in generated html #12

AndreyGudin Feb 19, 2022

Replies: 9 comments

webdiscus Feb 19, 2022 Maintainer

AndreyGudin Feb 19, 2022 Author

webdiscus Apr 2, 2022 Maintainer

webdiscus Apr 2, 2022 Maintainer

AndreyGudin Apr 3, 2022 Author

webdiscus Apr 3, 2022 Maintainer

webdiscus Apr 3, 2022 Maintainer

AndreyGudin Apr 9, 2022 Author

webdiscus Apr 18, 2022 Maintainer

AndreyGudin
Feb 19, 2022

webdiscus
Feb 19, 2022
Maintainer

AndreyGudin
Feb 19, 2022
Author

webdiscus
Apr 2, 2022
Maintainer

webdiscus
Apr 2, 2022
Maintainer

AndreyGudin
Apr 3, 2022
Author

webdiscus
Apr 3, 2022
Maintainer

webdiscus
Apr 3, 2022
Maintainer

AndreyGudin
Apr 9, 2022
Author

webdiscus
Apr 18, 2022
Maintainer