Maison > Article > interface Web > Explication détaillée des étapes pour utiliser dev-server dans webpack
Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation de dev-server dans webpack Quelles sont les précautions lors de l'utilisation de dev-server dans webpack. Voici des cas pratiques, jetons un coup d'œil. .
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.
mode iframe ( la page est placée dans une iframe et rechargée lorsque des modifications surviennent)
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 :
Ajouter le --inline commande à la ligne de commande
Ajouter devServer :{inline:true}
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 --hotRemarque : 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 à chaudVoici trois choses à faire :
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 de l'utilisation de la méthode Vuex dans React
Instructions d'utilisation des instructions intégrées de Vue
Comment réaliser le fractionnement et le chargement du code de la page à la demande
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!