recherche

Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation de webpack-dev-server (avec code)

Explication détaillée de l'utilisation de webpack-dev-server (avec code)

php中世界最好的语言
php中世界最好的语言original
2018-04-20 14:08:022770parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de webpack-dev-server (avec code), quelles sont les précautions lors de l'utilisation de webpack-dev-server, et ce qui suit est un guide pratique cas, jetons un coup d'oeil.

webpack-dev-server

webpack-dev-server est un petit serveur Node.js Express qui utilise webpack-dev-middleware pour servir le package webpack, en plus à cela, 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 app et les empaquetez dans bundle.js sous le dossier build via webpack.

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

Répertoire de base

webpack-dev-server Par défaut, le répertoire actuel sera utilisé comme répertoire de base , 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 et utilisera le répertoire build comme répertoire racine. Une chose à noter est : webpack - Le package généré par dev. -server n'est pas placé dans votre répertoire réel, mais en mémoire

Nous créons un nouveau fichier index.html dans le répertoire de base, puis saisissons http dans le navigateur : //localhost:8080 access.

<!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ée dans une iframe et rechargée lorsque des modifications surviennent)

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

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
L'utilisation de ce mode ne nécessite pas configuration supplémentaire, 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 en ligne . Il existe deux situations lors de l'activation de ce mode :

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

  1. Ajouter le --inline commande à la ligne de commande

  2. Ajouter devServer :{inline:true}

2 Au démarrage de Webpack -dev-server avec l'API Node.js, nous devons également faire deux choses :

  1. En raison de la configuration de webpack-dev-server Il n'y a pas d'option en ligne, nous devons ajouter webpack-dev-server/client?http://«path»:«port»/ vers le point d'entrée de la configuration du webpack

  2. sera Ajouter au fichier html 

 var config = require("./webpack.config.js");
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
 contentBase:'build/',
 publicPath: "/assets/"
});
server.listen(8080);
dans 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

Ajoutez-en simplement plus ici Le - La commande -hot est OK. Comme indiqué ci-dessous. 

webpack-dev-server --content-base build --inline --hot
Remarque : en mode ligne de commande, output.publicPath doit être configuré dans webpack.config.js pour spécifier l'emplacement d'accès au package compilé (bundle).

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

Voici trois choses à faire :

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

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

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

Option 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 'http://localhost:8080/' 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('/some/path', function(req, res) {
 // res.json({ custom: 'response' });
 // });
 },
 // 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's a required option.
 publicPath: "/assets/",
 headers: { "X-Custom-Header": "yes" },
 stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();
Je crois que vous avez maîtrisé la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de packaging du projet Vue par environnement

Évitez les malentendus Dom lors de l'utilisation d'Angular2

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!

php node.js html npm webpack express JS dom http
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：Explication détaillée des étapes de packaging du projet Vue par environnementArticle suivant：Explication détaillée des étapes de packaging du projet Vue par environnement

Articles Liés

Voir plus