web-dev-qa-db-fra.com

comment faire pour que Webpack TypeScript réagisse sur la configuration de Webpack-dev-server pour la construction et le rechargement automatiques

Mon intention est d'avoir une telle structure de répertoire:

- /my-project/
  -- /src/ (here are all .tsx files located)
  -- /dist/
     - index.html
     - /build/
        -bundle.js

 -- /node_modules/
 -- package.json
 -- tsconfig.json
 -- webpack.config.js

Donc, je veux avoir mon index.html qui est créé manuellement dans le sous-répertoire/dist et à l’intérieur de celui-ci, je veux avoir le sous-répertoire/build où se trouve le app.js créé par webpack.

Et je veux quand je sauve un fichier .tsx situé dans mon répertoire/src webpack reconstruire automatiquement app.js et webpack-dev-server reflètent automatiquement les changements.

Mon package.json ressemble à ceci:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My first React App",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
    "build": "webpack --config webpack.config.js --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "AndreyKo",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^0.14.54",
    "@types/react-dom": "^0.14.19",
    "jquery": "^3.1.1",
    "source-map-loader": "^0.1.5",
    "ts-loader": "^1.3.0",
    "TypeScript": "^2.1.4",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}

Mon webpack.config.js:

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "app.js",
        publicPath: "/dist/",
        path: "./dist/build/"
    },
    dev_tool: "source-map",
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            {test: /\.tsx?$/, loader: 'ts-loader'}
        ],
        preloaders: [
            {test: /\.js$/, loader: 'source-map-loader'}
        ]
    }
}

Mon index.html:

<!DOCTYPE html>
<html>
    <body>
        <div id="app-container"></div>
    </body>
    <script src="./build/app.js"></script>
</html>

Et mon fichier index.tsx ressemble à ceci:

import * as jQuery from 'jquery';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function appOutput() {
    ReactDOM.render(<div>Hello, we are talking from React!</div>, document.getElementById("app-container"));
}
appOutput();

J'ai fait des commandes au terminal: 

npm run build
npm run start

Le fichier app.js a donc été créé et Webpack-dev-server a commencé à fonctionner et à ouvrir une page dans le navigateur. Tout va bien de loin. Mais lorsque je modifie le texte dans mon index.tsx et que je sauvegarde ce fichier, rien ne change, j’essayai d’actualiser la page du navigateur, le texte reste le même et app.js n’est pas reconstruit. Pour faire changer le texte I Il faut reconstruire app.js avec webpack manuellement depuis le terminal en lançant "npm run build". 

Comment améliorer mon flux de travail pour que les modifications dans mon dossier/src soient automatiquement répercutées dans mon fichier dist/build/app.js sans avoir à le reconstruire manuellement?

javascriptreactjstypescriptwebpackwebpack-dev-server
8
AndreyKo

Je mets ici une réponse plus complète et (ce qui est plus important) plus correcte pour quiconque pourrait trébucher sur la configuration de l’environnement de développement pour le développement de react-webpack-TypeScript. D'une certaine manière, lire la documentation ne me suffisait pas et j'ai dû passer plus d'une journée pour que cela fonctionne.

Je voulais donc obtenir la structure de répertoires dans laquelle les fichiers javascript fournis sont plus profonds que le fichier html index.html. Regardez le post initial pour la structure de répertoires complète.

Et en tant que développeur que je voulais quand je modifie un fichier .tsx dans le dossier/src, mes modifications sont reflétées dans le navigateur et nous devons également recompiler le fichier .js intégré. À cette fin, deux scripts sont créés dans le bloc de scripts du fichier package.json du projet:

  "scripts": {
    "start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
    "build": "webpack --config webpack.config.js --watch",
  }

Le premier démarre webpack-dev-server en fournissant le répertoire racine/dist à servir et les clés --hot --inline pour recharger automatiquement la page du navigateur et se débarrasser des iframe inutiles. Il y a aussi --port defined et auto page --open lorsque webpack-dev-server est démarré.

La deuxième commande est destinée à la reconstruction automatique du fichier app.js fourni par webpack grâce à la clé --watch.

Et pour que ces commandes fonctionnent comme prévu, le pack Web doit être correctement configuré dans le fichier webpack.config.js. Et la partie la plus délicate pour moi (et pour beaucoup d’autres comme je l’ai vu par la suite) était les paramètres corrects relatifs au chemin, à publicPath et au nom de fichier du bloc de sortie. Il y a une erreur dans mon message initial dans publicPath qui a fait que mon serveur webpack-dev-server ne fonctionnait pas.

Le bloc de sortie qui ne fonctionnait pas était:

output: {
    filename: "app.js",
    publicPath: "/dist/",
    path: "./dist/build/"
}

Le bloc de sortie qui fonctionne est:

output: {
    filename: "app.js",
    publicPath: "/build/",
    path: "./dist/build/"
}

la propriété publicPath est utilisée par le serveur webpack-dev pour actualiser la page du navigateur. Elle doit être définie sur le répertoire où se trouvent vos fichiers .js compilés par rapport au répertoire du serveur racine défini par --content-base key à mon début. script et fait référence à ./dist dans mon projet. Donc, la valeur correcte est/build/et non/dist /.

les propriétés chemin et nom de fichier sont utilisées par webpack et la commande où placer et comment nommer le fichier .js fourni. Dans mon cas, le fichier ./dist/build/app.js sera créé.

Une autre chose qui est certainement présente dans la documentation, mais j'aimerais préciser que lorsque je sauvegarde un fichier .tsx après avoir démarré mon serveur webpack-dev-server avec mon script de démarrage mais que je n'ai pas exécuté la commande de compilation (ce qui rend webpack watch change) Je reçois les résultats mis à jour dans le navigateur, mais mon fichier app.js fourni n’est pas modifié. Et ceci parce que webpack-dev-server ne met à jour que la copie en mémoire du fichier .js fourni et non le fichier lui-même. Pour synchroniser, nous devons reconstruire le paquet avec webpack.

Si je veux que mon fichier .js intégré reste synchronisé avec la page du navigateur, je dois apporter des modifications à Webpack et webpack-dev-server pour effectuer un rechargement à chaud de la page. J'exécute donc les scripts "start" et "build". Mais je ne peux pas exécuter les deux à partir d’une invite de commande sur mon ordinateur Windows dev. Je les ai donc exécutés séparément avec:

Ceci est valable uniquement pour Windows!

start npm run start && start npm run build

Et pour le plaisir de mes doigts, je mets cette ligne dans le fichier run.bat qui est placé dans le dossier du projet. Maintenant, je peux simplement ouvrir le terminal Windows dans l'éditeur VSCode et exécuter la commande "run".

C'est tout pour le moment.

6
AndreyKo

Ok, alors j'ai réussi à résoudre mon problème mais pas parfaitement.

Comme il semble que cela dépend du système d’exploitation et de l’environnement, je veux être précis: Mon système d’exploitation - windows7 Mon éditeur - VS Code.

Tout d'abord, je voudrais noter que mon installation fonctionne comme je le souhaitais sans aucun ajustement.

Mais cela ne fonctionne pas lorsque j'exécute ma construction et lance les commandes à partir du terminal VS Code.

Pour que cela fonctionne, j'ai dû ouvrir deux fenêtres de terminal distinctes. Dans la première, j'ai exécuté mon script de construction et dans la seconde, mon script de démarrage:

first Terminal > npm run build
second Terminal > npm run start

Une autre façon de le faire directement depuis le terminal de VS Code consiste à y exécuter cette commande:

start npm run start && start npm run build

qui fait absolument la même chose - ouvre deux fenêtres de terminal et exécute les commandes npm dans ces fenêtres.

Enfin, j'ai créé un fichier run.bat dans lequel je mets cette ligne et je peux maintenant ouvrir mon projet dans VS Code et dans la commande de terminal exécutée "run". Webpack et webpack-dev-server commencent à surveiller les modifications.

C'est tout. S'il y a de meilleurs moyens, veuillez me le signaler, je suis ouvert à des moyens plus élégants de le résoudre.

1
AndreyKo