question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How add [hash] for .js .css and other files in build?

See original GitHub issue

I want add [name][hash].[ext] for .js .css and other files in build

For example in webpack i have file-loader and i have

options: {
              name: '[name]__[hash]__.[ext]',
              publicPath: '...',
              outputPath: '...',
            },

How do same in next.config.js? Or nextjs do hashing files when build?

Tech Version
next 5.1.0
node 10.0.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

7reactions
timneutkenscommented, May 14, 2018

Doesn’t seem like a Next.js issue. Maybe you’re using one of the next-plugins, in that case file it there. Also, when creating issues, please follow the issue template.

1reaction
popuguytheparrotcommented, May 14, 2018

it working but look like as shi~

const nextConfiguration = {
  webpack: (config, { dev, buildId }) => {
    if (!dev) {
      const nextExtractTextPlugin = config.plugins.find(
        element => element.__proto__.constructor.name === 'ExtractTextPlugin'
      );
      nextExtractTextPlugin.filename = `static/style.${buildId}.css`;
      config.plugins.push(nextDefinePlugin(buildId), nextCleanWebpackPlugin);
      return config;
    }
    config.plugins.push(nextDefinePlugin);
    return config;
  }
};
Read more comments on GitHub >

github_iconTop Results From Across the Web

Adding Hashes to Filenames - SurviveJS
According to Steve Souders, attaching the hash to the filename is the most performant option. Setting up hashing#. The build needs tweaking to...
Read more >
Angular: Add hashing to the files in assets during build
I make the build of my project using ng build --prod --output-hashing=all but the problem with this command is that it only hashes...
Read more >
Assets get a file hash appended to their and ... - Relish
Assets get a file hash appended to their and references to them are updated ; Hashed-asset files are produced, and HTML, CSS, and...
Read more >
Build & Deploy - Hands on React
Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the...
Read more >
Asset compilation - Advanced use - Ember CLI Guides
In addition, your HTML, JS, and CSS files will be re-written to include the new name. There are a few options you can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found