Explication détaillée de l'utilisation de webpack+dev+server-js tutoriel-php.cn

Explication détaillée de l'utilisation de webpack+dev+server

php中世界最好的语言

Libérer： 2018-06-11 15:50:58

original

1706 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de webpack+dev+server Quelles sont les précautions pour l'explication détaillée de l'utilisation de webpack+dev+server Ce qui suit est un cas pratique, prenons un. regarder.

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"
}
}

Copier après la connexion

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 pouvez l'installer via npm install webpack-dev-server.

Répertoire de base

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

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

Copier après la connexion

La commande ci-dessus est exécutée dans la ligne de commande, qui utilisera le répertoire build comme répertoire racine. Une chose à noter est : le package généré par webpack-dev-server Il 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://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>

Copier après la connexion

Actualisation automatique

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

mode iframe (la page est placée dans un iframe et rechargé lorsque des modifications se produisent)
mode en ligne (ajouter l'entrée client de webpack-dev-sever au bundle)

Les deux modes prend 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

mode en ligne L'URL que nous visitons n'a pas besoin de changer. 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 :

Ajoutez la commande --inline à la ligne de commande
Ajouter devServer :{inline:true} à webpack.config.js

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

Comme il n'y a pas d'option en ligne dans la configuration de webpack-dev-server, nous devons ajouter webpack-dev-server/client ? http://«path»:«port»/ vers le point d'entrée de la configuration du webpack.
Change 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);

Copier après la connexion

Exécutez le code ci-dessus dans Node C'est tout.

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

Copier après la connexion

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 :

Ajouter à l'option d'entrée de. config.js : webpack/hot/dev-server
Ajouter à l'option plugins de webpack.config.js : new webpack.HotModuleReplacementPlugin()
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();

Copier après la connexion

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 :

D3.js pour créer une carte de stockage circulaire de mémoire

Utilisez AngularJS pour implémenter des applications à partir de zéro Modulaire

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!