CODEWITHSUNDEEP
phpnode.jswordpresswebpackvue.js
Aaa
Aaa

Reputation: 910

How can I stop Webpack filenames from changing?

I am very new to webpack.

I have set up a boilerplate template with vue-cli. Currently, when I run npm run build my files will compile to the /dist/build folder, then split into js and css folders.

I'm making a WordPress theme, and I'm accessing the files from <script> and <style> tags. It works... But every time I recompile Webpack via npm run build, the file names randomize, adding a string of random characters at the end (making it impossible to reference the files directly from index.php).

Is there a way to stop Webpack from randomizing the filenames? I don't want to have to update my index.php every time I compile. Or am I going about this the wrong way?

Upvotes: 4

Views: 2870

Answers (1)

Brendan Gannon
Brendan Gannon

Reputation: 2652

This is a feature -- the idea is that you can allow browsers to cache your js/css as long as possible, but change the actual filename each time you change the file so that browsers won't recognize it and won't use a cached version. But it does require you have a way to update your HTML source with the updated filenames on each build (there are packages to automate this, of course).

But if you don't want to do that you don't have to. webpack's config lets you specify the filename to use for a build. output.filename is the config field you use. See the docs on output here for more info.

Upvotes: 4

Related Questions