[Solution] HMR (Hot Module Replacement) ne fonctionne pas avec @ vue3 construit avec Docker et accélère le webpack [Docker]

J'ai créé un projet à l'aide de VueCLI en me référant à l'article suivant, mais je l'ai résolu car le rechargement à chaud ne fonctionnait pas. Créez une liste Todo équipée de CRUD avec Vue.js + Express + Sequelize + Docker

environnement

$ vue --version
@vue/cli 4.5.4

package.json

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",

Conclusion

Si vous n'écrivez que la conclusion, ajoutez ce qui suit à la racine du projet (même hiérarchie que src etc.)

vue.config.js

module.exports = {
  configureWebpack: {
    devServer: {
      watchOptions: {
        poll: true
      }
    }
  }
}

Qu'est-ce que le sondage?

Je suis en train de bricoler le paramètre de sondage du Webpack, mais je me demandais ce qu'était le sondage, alors je l'ai recherché.

Selon cela, la montre de Webpack utilise inotify, un mécanisme de surveillance des événements du système de fichiers ajouté à partir de Linux 2.6. Cependant, il semble que j'utilise NFS pour synchroniser des fichiers sur l'hôte avec VirualBox et inotify ne prend pas en charge NFS. Détecter les modifications de fichiers avec Webpack Watch dans Docker

L'interrogation est un cycle périodique pour plusieurs appareils et programmes afin d'éviter les conflits, de déterminer la disponibilité de lecture / réception et de synchroniser le traitement dans les communications et les logiciels. C'est une méthode de communication et de traitement qui effectue des demandes et envoie / reçoit et traite lorsque certaines conditions sont remplies. Wikipédia: [Sondage (information)](https://ja.wikipedia.org/wiki/%E3%83%9D%E3%83%BC%E3%83%AA%E3%83%B3%E3%82% B0_ (% E6% 83% 85% E5% A0% B1) #: ~: texte =% E3% 83% 9D% E3% 83% BC% E3% 83% AA% E3% 83% B3% E3% 82% B0% EF% BC% 88 polling% EF% BC% 89% E3% 81% A8% E3% 81% AF% E3% 80% 81,% E6% 96% B9% E5% BC% 8F% E3% 81% AE % E3% 81% 93% E3% 81% A8% E3% 81% A7% E3% 81% 82% E3% 82% 8B% E3% 80% 82)

Je vois.

La construction est lente

Je suis content d'avoir pu faire HMR, mais le temps de construction est lent ...

DONE Compiled successfully in 25403ms9:05:21 AM

Vingt-cinq secondes prendront trop de temps ...

Avis sur Building Vue

Je pense que le module bundler deviendra automatiquement un webpack lorsque vous générerez un projet avec vue-cli. Le module bundler est un outil qui génère plusieurs fichiers en un seul. La plupart des rôles consistent à organiser JavaScript, mais dans certains cas, il organise également le CSS et les images.

Il y a plusieurs avantages à utiliser Pandora, mais le plus typique est de résoudre automatiquement les dépendances.

Il analyse automatiquement les dépendances entre les fichiers JS et les rassemble en un seul fichier

Autres références

• Qu'est-ce que Webpack?

Il existe différentes versions en vue, avec des caractéristiques différentes.

• [À propos de diverses versions](https://jp.vuejs.org/v2/guide/installation.html#%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE % E3% 81% AA% E3% 83% 93% E3% 83% AB% E3% 83% 89% E3% 81% AB% E3% 81% A4% E3% 81% 84% E3% 81% A6)
• Différence entre la version complète et la version d'exécution de Vue.js

webpack dans vue-cli

Avec vue-cli, les paramètres d'utilisation de webpack sont également affichés, donc même si nous ne comprenons pas beaucoup le module bundler, nous pouvons en profiter.

• [Que fait webpack (vue-cli)?](Https://scrapbox.io/vue-yawaraka/webpack (vue-cli)% E3% 81% AF% E4% BD% 95% E3% 82% 92% E3% 81% 97% E3% 81% A6% E3% 81% 8F% E3% 82% 8C% E3% 82% 8B% E3% 82% 82% E3% 81% AE% E3% 81% AA% E3% 81% AE% E3% 81% 8B)

Même ainsi, Webpack est lent!

Donc, je voudrais travailler sur l'accélération du webpack. Nous allons introduire quelque chose appelé «cache-loader».

DONE Compiled successfully in 25403ms9:05:21 AM

Actuellement, cela prend 25 secondes.

Entrons depuis le cli ouvert depuis Docker! npm install --save-dev cache-loader

vue.config.js

module.exports = {
  //Ajoutez ce qui suit
  configureWebpack: {
    module: {
        rules: [
          {
            test: /\.js$/,
            use: ['cache-loader', 'vue-loader'],
            include: path.resolve('src'),
          },
        ],
      },
  },
  devServer: {
    watchOptions: {
      poll: true,
    },

    port: 8080,
    host: "0.0.0.0",
    useLocalIp: true,
  },
};

référence

• webpack/cache-loader
• Vue Vli/Working with Webpack
• Comment activer les paramètres Webpack dans vue.config.js
• Accélérer la construction du webpack avec un chargeur de thread et un chargeur de cache

J'ai pensé, mais j'ai eu une erreur

ERROR Error loading /vue/frontapp/vue.config.js:

ERROR ReferenceError: path is not defined

ReferenceError: path is not defined

at Object.<anonymous> (/vue/frontapp/vue.config.js:8:22)

at Module._compile (internal/modules/cjs/loader.js:959:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)

at Module.load (internal/modules/cjs/loader.js:815:32)

at Function.Module._load (internal/modules/cjs/loader.js:727:14)

at Module.require (internal/modules/cjs/loader.js:852:19)

at require (internal/modules/cjs/helpers.js:74:18)

at exports.loadModule (/vue/frontapp/node_modules/@vue/cli-shared-utils/lib/module.js:79:14)

at Service.loadUserOptions (/vue/frontapp/node_modules/@vue/cli-service/lib/Service.js:330:22)

at Service.init (/vue/frontapp/node_modules/@vue/cli-service/lib/Service.js:70:30)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! [email protected] serve: `vue-cli-service serve`

npm ERR! Exit status 1



npm ERR!

npm ERR! Failed at the [email protected] serve script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.


npm ERR! A complete log of this run can be found in:

npm ERR! /root/.npm/_logs/2020-11-01T12_06_41_379Z-debug.log

Ajoutez const path = require ('path'); au début

const path = require('path');
module.exports = {
  configureWebpack: {
    module: {
        rules: [
          {
            test: /\.js$/,
            use: ['cache-loader'],
            include: path.resolve('src'),
          },
        ],
      },
  },
  devServer: {
    watchOptions: {
      poll: true,
    },

    port: 8080,
    host: "0.0.0.0",
    useLocalIp: true,
  },
};

DONE Compiled successfully in 5655ms6:57:29 AM

Réduction de 25,4 secondes à 5,6 secondes: tada :: tada :: tada:

Au fait, j'ai eu une erreur, alors je l'ai résolue.

(node:20) [SEQUELIZE0004] DeprecationWarning: A boolean value was passed to options.operatorsAliases. This is a no-op with v5 and should be removed.

DeprecationWarning: Une valeur booléenne a été transmise à options.operatorsAliases. Cela ne fait rien dans la v5 et devrait être supprimé En référence à Résolu en remplaçant "" operatorsAliases ": false dans config / config.json par" operatorsAliases ": 0`.

Si vous êtes coincé, prenez un repas, prenez un bain et allez vous coucher Approche du charme de l'oeuvre populaire "Helltaker"! Entretien avec M. Kagero 01 "Si vous avez un problème, prenons un bain, mangeons et dormons" [Sur le site de la japonaisisation des bénévoles] e? N'êtes-vous pas doué pour le piratage? Pour vous, Tower Defense Arc Knights e? Vous n'aimez pas le tower defense? Pour vous, le Tower Offense Girl Front est recommandé!