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.
mode iframe (la page est placé dans une iframe et rechargé lorsque des modifications se produisent)
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 :
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);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 :
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();Référence : http://webpack.github.io/ docs/webpack-dev -server.html
Recommandations associées :
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
