Ștergerea cache-ului Webpack (Programare, Angular, Trei.Js, Webpack)

Katana24 a intrebat.
a intrebat.

Cum procedezi pentru a forța webpack să își curețe memoria cache?

Fac o mulțime de muncă cu threejs și webpack și, din anumite motive, fără să știu, are două copii ale lui threejs în memorie. Aici este eroarea:

Acest fișier nu se află într-un folder ascuns în folderul aplicației, ci în memoria webpacks găsită prin intermediul instrumentelor Chrome Dev – de ex.

Deci, există vreo modalitate de a forța webpack să își curețe memoria cache?

4 răspunsuri
Joe.b

În cazul în care acest lucru ajută pe altcineva, am avut un caz similar și problema a fost că într-unul dintre fișiere declarația mea de import avea o majusculă în nume. De exemplu, am avut

import {Person} from './model/Model';

Rețineți că am șters fișierul ./model/Model.js, dar încă primeam eroarea din cauza importului. Schimbați doar importul ca fiind

import {Person} from './model/model';

și totul este din nou în regulă.

Seyhan

Webpack nu are caching, dar browserele au. Fișierele produse de compilarea Webpack pot rămâne în memoria cache dacă conținutul lor nu s-a schimbat. Pe documentația se explică faptul că, pentru a rezolva această problemă, puteți adăuga [contenthash] la numele fișierelor de ieșire.

Substituția [contenthash] va adăuga un hash unic bazat pe conținutul unui activ. Când conținutul activului se modifică, [contenthash] se va modifica și el.

module.exports = {
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    }
};

PS: Folosesc Webpack v4.30.0.

Pentru mai multe informații, consultați Ghidul Webpack pentru caching.

Comentarii

  • Mi se schimbă [contenthash] și am confirmat acest lucru, DAR browserul folosește în continuare [contenthash] anterior în browser. adică browserul nu se reîncarcă automat. Cum detectează browserul noul fișier [contenthash] js [contenthash]? –  > Por logixplayer.
John Mee

După cum spune avertismentul, aveți două copii ale fișierului three.js în directoare care au același nume efectiv atunci când ignori majusculele: „trei” vs „TREI” sunt identice.

Dacă sunt diferite, atunci redenumiți una dintre ele. Sau, dacă sunt același modul, dați-le ambelor un nume identic, cu minuscule.

Comentarii

  • webpack are memorie cache –  > Por atilkan.
Eissa

Pentru a forța ștergerea cache-ului în browser, ați putea încărca dinamic fișierul generat js bundle cu javascript cu un parametru de interogare în fișierul src atribut, apoi să apelați o funcție pentru a executa alte scripturi atunci când fișierul este încărcat:

<script type="text/javascript">
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.onload = function () {
        init(); // call other scripts when this file is fully loaded
    };
    script.src = 'dist/bundle.js?v='+Date.now();

    document.getElementsByTagName('body')[0].appendChild(script);
</script>

<script>
    function init(argument) {
        // other scripts
        console.log('dist/bundle.js is loaded from the server not from the cache')
    }
</script>

vezi: Încărcați dinamic JS în interiorul JS