webpack-dev-server使用详解（附代码）
这次给大家带来webpack-dev-server使用详解（附代码），webpack-dev-server使用的注意事项有哪些，下面就是实战案例，一起来看一下。
webpack-dev-server
webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.
我们来看一下下面的配置文件(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"
}
}这里你将你的源文件放在app文件夹下,并通过webpack将其打包到build文件夹下的bundle.js中.
注意:webpack-dev-server是一个独立的NPM包,你可以通过npm install webpack-dev-server来安装它.
基本目录
webpack-dev-server默认会以当前目录为基本目录,除非你制定它.
webpack-dev-server --content-base build/
上述命令是在命令行中执行的,它将build目录作为根目录.有一点需要注意的是:webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中.
我们在基本目录下新建一个index.html文件,然后在浏览器中输入http://localhost:8080访问.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="assets/bundle.js"></script> </body> </html>
自动刷新
webpack-dev-server支持两种模式来自动刷新页面.
iframe模式(页面放在iframe中,当发生改变时重载)
inline模式(将webpack-dev-sever的客户端入口添加到包(bundle)中)
两种模式都支持热模块替换(Hot Module Replacement).热模块替换的好处是只替换更新的部分,而不是页面重载.
iframe模式
使用这种模式不需要额外的配置,只需要以下面这种URL格式访问即可
http://«host»:«port»/webpack-dev-server/«path»
例如:http://localhost:8080/webpack-dev-server/index.html.
inline模式
inline模式下我们访问的URL不用发生变化,启用这种模式分两种情况:
1 当以命令行启动webpack-dev-server时,需要做两点：
在命令行中添加--inline命令
在webpack.config.js中添加devServer:{inline:true}
2 当以Node.js API启动webpack-dev-server时,我们也需要做两点:
由于webpack-dev-server的配置中无inline选项,我们需要添加webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口点中.
将添加到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);在Node中运行上面的代码即可。
注意：webpack配置中的devSever配置项只对在命令行模式有效。
(Hot Module Replacement)热模块替换
在命令行中运行inline模式，并启用热模块替换
这里只需要多增加 --hot指令就OK了.如下所示.
webpack-dev-server --content-base build --inline --hot
注意:命令行模式下,webpack.config.js中一定要配置output.publicPath来指定编译后的包(bundle)的访问位置.
在Nodejs API中运行inline模式，并启用热模块替换
这里需要做以下三点:
在webpack.config.js的entry选项中添加:webpack/hot/dev-server
在webpack.config.js的plugins选项中添加:new webpack.HotModuleReplacementPlugin()
在webpack-dev-server的配置中添加：hot:true
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();相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci webpack-dev-server使用详解（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk menyelesaikan kod pemandu win7 28
Dec 30, 2023 pm 11:55 PM
Sesetengah pengguna mengalami ralat semasa memasang peranti, menyebabkan kod ralat 28. Sebenarnya, ini disebabkan terutamanya oleh pemandu Kami hanya perlu menyelesaikan masalah kod pemandu win7 28. Mari kita lihat apa yang perlu dilakukan . Apa yang perlu dilakukan dengan kod pemandu win7 28: Pertama, kita perlu mengklik pada menu mula di sudut kiri bawah skrin. Kemudian, cari dan klik pilihan "Panel Kawalan" dalam menu pop timbul. Pilihan ini biasanya terletak di atau berhampiran bahagian bawah menu. Selepas mengklik, sistem akan membuka antara muka panel kawalan secara automatik. Dalam panel kawalan, kami boleh melakukan pelbagai tetapan sistem dan operasi pengurusan. Ini adalah langkah pertama dalam tahap pembersihan nostalgia, saya harap ia membantu. Kemudian kita perlu meneruskan dan memasuki sistem dan
Apa yang perlu dilakukan jika kod skrin biru 0x0000001 berlaku
Feb 23, 2024 am 08:09 AM
Apa yang perlu dilakukan dengan kod skrin biru 0x0000001 Ralat skrin biru adalah mekanisme amaran apabila terdapat masalah dengan sistem komputer atau perkakasan Kod 0x0000001 biasanya menunjukkan kegagalan perkakasan. Apabila pengguna tiba-tiba mengalami ralat skrin biru semasa menggunakan komputer mereka, mereka mungkin berasa panik dan rugi. Nasib baik, kebanyakan ralat skrin biru boleh diselesaikan dan ditangani dengan beberapa langkah mudah. Artikel ini akan memperkenalkan pembaca kepada beberapa kaedah untuk menyelesaikan kod ralat skrin biru 0x0000001. Pertama, apabila menghadapi ralat skrin biru, kita boleh cuba untuk memulakan semula
Komputer kerap berskrin biru dan kodnya berbeza setiap kali
Jan 06, 2024 pm 10:53 PM
Sistem win10 ialah sistem kecerdasan tinggi yang sangat baik Kepintarannya yang berkuasa boleh membawa pengalaman pengguna yang terbaik kepada pengguna Dalam keadaan biasa, komputer sistem win10 pengguna tidak akan menghadapi sebarang masalah. Walau bagaimanapun, tidak dapat dielakkan bahawa pelbagai kerosakan akan berlaku pada komputer yang sangat baik Baru-baru ini, rakan-rakan telah melaporkan bahawa sistem win10 mereka sering menghadapi skrin biru. Hari ini, editor akan membawakan anda penyelesaian kepada kod berbeza yang menyebabkan skrin biru kerap berlaku dalam komputer Windows 10 Mari kita lihat. Penyelesaian kepada skrin biru komputer yang kerap dengan kod berbeza setiap kali: punca pelbagai kod kerosakan dan cadangan penyelesaian 1. Punca kerosakan 0×000000116: Seharusnya pemacu kad grafik tidak serasi. Penyelesaian: Adalah disyorkan untuk menggantikan pemacu pengilang asal. 2.
Selesaikan ralat kod 0xc000007b
Feb 18, 2024 pm 07:34 PM
Kod Penamatan 0xc000007b Semasa menggunakan komputer anda, kadangkala anda menghadapi pelbagai masalah dan kod ralat. Antaranya, kod penamatan adalah yang paling mengganggu terutamanya kod penamatan 0xc000007b. Kod ini menunjukkan bahawa aplikasi tidak boleh dimulakan dengan betul, menyebabkan ketidakselesaan kepada pengguna. Mula-mula, mari kita fahami maksud kod penamatan 0xc000007b. Kod ini ialah kod ralat sistem pengendalian Windows yang biasanya berlaku apabila aplikasi 32-bit cuba dijalankan pada sistem pengendalian 64-bit. Maksudnya sepatutnya
Program kod jauh universal GE pada mana-mana peranti
Mar 02, 2024 pm 01:58 PM
Jika anda perlu memprogramkan sebarang peranti dari jauh, artikel ini akan membantu anda. Kami akan berkongsi kod jauh universal GE teratas untuk pengaturcaraan sebarang peranti. Apakah alat kawalan jauh GE? GEUniversalRemote ialah alat kawalan jauh yang boleh digunakan untuk mengawal berbilang peranti seperti TV pintar, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, pemain media penstriman dan banyak lagi. Alat kawalan jauh GEUniversal datang dalam pelbagai model dengan fungsi dan keupayaan yang berbeza. GEUniversalRemote boleh mengawal sehingga empat peranti. Kod Jauh Universal Teratas untuk Diprogramkan pada Mana-mana Peranti Alat kawalan jauh GE disertakan dengan set kod yang membolehkannya berfungsi dengan peranti yang berbeza. anda boleh
Apakah yang diwakili oleh kod skrin biru 0x000000d1?
Feb 18, 2024 pm 01:35 PM
Apakah maksud kod skrin biru 0x000000d1 Dalam beberapa tahun kebelakangan ini, dengan pempopularan komputer dan perkembangan pesat Internet, isu kestabilan dan keselamatan sistem pengendalian telah menjadi semakin menonjol. Masalah biasa ialah ralat skrin biru, kod 0x000000d1 adalah salah satu daripadanya. Ralat skrin biru, atau "Skrin Biru Kematian," ialah keadaan yang berlaku apabila komputer mengalami kegagalan sistem yang teruk. Apabila sistem tidak dapat pulih daripada ralat, sistem pengendalian Windows memaparkan skrin biru dengan kod ralat pada skrin. Kod ralat ini
Penjelasan terperinci tentang punca dan penyelesaian kod skrin biru 0x0000007f
Dec 25, 2023 pm 02:19 PM
Skrin biru adalah masalah yang sering kita hadapi apabila menggunakan sistem Bergantung pada kod ralat, akan terdapat banyak sebab dan penyelesaian yang berbeza. Sebagai contoh, apabila kita menghadapi masalah berhenti: 0x0000007f, ia mungkin ralat perkakasan atau perisian Mari ikut editor untuk mengetahui penyelesaiannya. 0x000000c5 sebab kod skrin biru: Jawapan: Memori, CPU dan kad grafik tiba-tiba overclocked atau perisian berjalan dengan tidak betul. Penyelesaian 1: 1. Teruskan tekan F8 untuk masuk semasa but, pilih mod selamat, dan tekan Enter untuk masuk. 2. Selepas memasuki mod selamat, tekan win+r untuk membuka tetingkap jalankan, masukkan cmd, dan tekan Enter. 3. Dalam tetingkap command prompt, masukkan "chkdsk /f /r", tekan Enter, dan kemudian tekan kekunci y. 4.
Panduan ringkas untuk mempelajari lukisan Python: contoh kod untuk melukis kiub ais
Jan 13, 2024 pm 02:00 PM
Mulakan dengan pantas dengan lukisan Python: contoh kod untuk melukis Bingdundun Python ialah bahasa pengaturcaraan yang mudah dipelajari dan berkuasa Dengan menggunakan perpustakaan lukisan Python, kita boleh merealisasikan pelbagai keperluan lukisan dengan mudah. Dalam artikel ini, kami akan menggunakan pustaka lukisan Python matplotlib untuk melukis graf ringkas ais. Bingdundun ialah seekor panda comel yang sangat popular di kalangan kanak-kanak. Pertama, kita perlu memasang perpustakaan matplotlib. Anda boleh melakukan ini dengan berjalan di terminal
