简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Explication détaillée de l'utilisation simple des compétences webpack-dev-server_javascript

Explication détaillée de l'utilisation simple des compétences webpack-dev-server_javascript

不言
不言original
2018-04-03 09:36:421085parcourir

Cet article présente principalement en détail l'utilisation simple de webpack-dev-server. Maintenant, je le partage avec vous et vous donne une référence. Venez jeter un œil avec l'éditeur

webpack-dev-server

webpack-dev-server est un petit serveur Node.js Express Utilisez webpack. -dev-middleware pour servir les packages Webpack. De plus, il dispose également d'un micro runtime qui se connecte au serveur via Sock.js.

Jetons un coup d'œil au fichier de configuration suivant ( webpack.config.js) 

var path = require("path");
module.exports = {
 entry:{
 app:["./app/main.js"]
 },
 output:{
 path:path.resolve(__dirname,"build"),
 publicPath:"/assets/",
 filename:"bundle.js"
}
}

Ici, vous placez vos fichiers sources dans le dossier de l'application et les regroupez dans le fichier de construction via webpack bundle.js dans le dossier.

Remarque : webpack-dev-server est un package NPM indépendant, vous pouvez l'installer via npm install webpack-dev-server.

Répertoire de base

webpack-dev-server utilisera le répertoire courant comme répertoire de base par défaut, sauf si vous le spécifiez.

webpack-dev-server --content-base build/

La commande ci-dessus est exécutée dans la ligne de commande, qui prend le répertoire build comme répertoire racine. Une chose à noter est que le package généré par webpack-dev-server n'est pas placé dans votre répertoire réel, mais placé dans la mémoire.

Nous créons un nouveau fichier index.html dans le répertoire de base, puis entrons http://localhost:8080 dans le navigateur pour y accéder.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="assets/bundle.js"></script>
</body>
</html>

Actualisation automatique

webpack-dev-server prend en charge deux modes pour actualiser automatiquement la page.

  1. mode iframe (la page est placé dans une iframe et rechargé lorsque des modifications se produisent)

  2. mode en ligne (ajouter l'entrée client de webpack-dev-sever au bundle) Medium)

Les deux modes prennent en charge le remplacement du module à chaud. L'avantage du remplacement du module à chaud est que seule la pièce mise à jour est remplacée au lieu du rechargement de la page.

mode iframe
Aucune configuration supplémentaire n'est requise pour utiliser ce mode, il vous suffit d'y accéder au format URL suivant

http://«host»:«port»/webpack-dev-server/«path»

Par exemple : http://localhost:8080/webpack-dev-server/index.html.

mode en ligne

L'URL à laquelle nous accédons n'a pas besoin de changer en mode inline. Il existe deux situations lors de l'activation de ce mode :

1 Lors du démarrage de webpack-dev-server depuis la ligne de commande, deux choses doivent être faites :

  1. Ajoutez la commande --inline dans la ligne de commande

  2. Ajoutez devServer :{inline:true}

    3. 2 Lors du démarrage de webpack-dev-server avec l'API Node.js, nous devons également faire deux choses :

    En raison de webpack-dev, il n'y a pas d'option en ligne dans la configuration du serveur. besoin d'ajouter webpack-dev-server/client?http://«path»:«port»/ au point d'entrée de la configuration du webpack.

    2. Ajouter ceeaf9b8c63c696568509a189b1ada8b2cacc6d41bbb37262a98f745aa00fbf0 au fichier html

 var config = require("./webpack.config.js");
 var webpack = require(&#39;webpack&#39;);
 var WebpackDevServer = require(&#39;webpack-dev-server&#39;);

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
 contentBase:&#39;build/&#39;,
 publicPath: "/assets/"
});
server.listen(8080);

Exécutez simplement le code ci-dessus dans Node.

Remarque : L'élément de configuration devSever dans la configuration du webpack n'est valable qu'en mode ligne de commande.

(Remplacement du module à chaud) Remplacement du module à chaud


Exécutez le mode en ligne dans la ligne de commande et activez le remplacement du module à chaud


Il vous suffit d'ajouter des instructions --hot ici. Comme indiqué ci-dessous 

webpack-dev-server --content-base build --inline --hot

Remarque : en mode ligne de commande, webpack.config Output. publicPath doit être configuré dans js pour spécifier l'emplacement d'accès du bundle compilé.

Exécutez le mode en ligne dans l'API Nodejs et activez le remplacement à chaud du module


ici Vous devez effectuer les trois étapes suivantes choses :

    Ajouter l'option d'entrée de webpack.config.js : webpack/hot/dev-server

    2. Ajouter à l'option plugins de webpack.config.js : new webpack.HotModuleReplacementPlugin()

    3. Ajouter à la configuration de webpack-dev-server : hot:true

    4. Options de configuration dans webpack-dev-server


var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");

var compiler = webpack({
 // configuration
});
var server = new WebpackDevServer(compiler, {
 // webpack-dev-server options

 contentBase: "/path/to/directory",
 // Can also be an array, or: contentBase: "http://localhost/",

 hot: true,
 // Enable special support for Hot Module Replacement
 // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
 // Use "webpack/hot/dev-server" as additional module in your entry point
 // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 

 // Set this as true if you want to access dev server from arbitrary url.
 // This is handy if you are using a html5 router.
 historyApiFallback: false,

 // Set this if you want to enable gzip compression for assets
 compress: true,

 // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
 // Use "**" to proxy all paths to the specified server.
 // This is useful if you want to get rid of &#39;http://localhost:8080/&#39; in script[src],
 // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
 proxy: {
 "**": "http://localhost:9090"
 },

 setup: function(app) {
 // Here you can access the Express app object and add your own custom middleware to it.
 // For example, to define custom handlers for some paths:
 // app.get(&#39;/some/path&#39;, function(req, res) {
 // res.json({ custom: &#39;response&#39; });
 // });
 },

 // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
 staticOptions: {
 },

 // webpack-dev-middleware options
 quiet: false,
 noInfo: false,
 lazy: true,
 filename: "bundle.js",
 watchOptions: {
 aggregateTimeout: 300,
 poll: 1000
 },
 // It&#39;s a required option.
 publicPath: "/assets/",
 headers: { "X-Custom-Header": "yes" },
 stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();

Référence : http://webpack.github.io/ docs/webpack-dev -server.html


Recommandations associées :


Comment définir le mode distant pour webpack-dev-server

Explication détaillée de webpack-dev-server utilisant http-proxy pour résoudre des problèmes inter-domaines

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment éviter les malentendus Dom dans Angular2 avancéArticle suivant：Comment éviter les malentendus Dom dans Angular2 avancé

Articles Liés

Voir plus