程序重载webpack-dev-server
程序重载（Program Reloading）是指在开发过程中，对程序进行修改后，能够实时地重新加载并运行修改后的程序，而无需重新启动整个应用程序。这种实时重载的能力可以提高开发效率，减少开发人员在调试和测试过程中的等待时间。
在前端开发中，webpack-dev-server是一个常用的开发服务器，它提供了程序重载的功能。webpack-dev-server可以监视项目文件的变化，并在文件发生改动时自动重新编译和刷新页面，使开发人员能够实时地查看修改后的效果。
webpack-dev-server的优势包括：
- 实时重载：修改代码后，webpack-dev-server会自动重新编译并刷新页面，无需手动刷新浏览器。
- 模块热替换（Hot Module Replacement）：webpack-dev-server支持模块热替换，即在不刷新整个页面的情况下，只替换修改的模块，提供更快的开发体验。
- 轻量级服务器：webpack-dev-server是一个轻量级的开发服务器，可以快速启动并提供静态文件服务。
- 支持多种开发场景：webpack-dev-server支持多种开发场景，包括单页应用、多页应用、React、Vue等框架的开发。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云CDN加速等。
腾讯云云服务器（CVM）：提供稳定可靠的云服务器，可用于部署和运行webpack-dev-server。
腾讯云对象存储（COS）：提供高可用、高可靠的对象存储服务，可用于存储webpack-dev-server编译后的静态文件。
腾讯云CDN加速：提供全球分布式的内容分发网络，可加速webpack-dev-server的静态资源访问速度，提供更好的用户体验。
更多关于腾讯云产品的介绍和详细信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我正在使用webpack来管理我的web应用程序，并使用webpack-dev-server来开发web服务器。我知道，webpack开发的服务器上有一个--watch开关，可以观察源码内容的变化。但是，当我运行webpack-dev-server --watch命令，然后更改源代码时，它不会重新加载源代码。我必须关闭服务器，然后运行webpack命令重新捆绑我的目标文件。下面是我的webpack-config.js文件，其中包含watch: true配置。我不明白为什么webpack-dev-server看不到源码的变化。
module.exports = {
entry: {
ap
浏览 0提问于2016-05-19得票数 0
我是新来的webpack，我正在尝试让它与吞咽工作。我正在使用以下链接中的指南，但它似乎不起作用：
https://webpack.github.io/docs/usage-with-gulp.html
谁能告诉我我的配置的哪一部分是错的？
gulpfile.js
import gulp from 'gulp';
import webpack from 'webpack';
import gutil from "gulp-util";
import WebpackDevServer from "webpack-dev-server"
浏览 6提问于2016-08-17得票数 0
在基础层面，尝试用HTML-插件配置webpack，得到2个问题.
为什么重要的是提到入口点和输出，这在webpack.config.js中已经提到了
没有生成html。
package.js
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"script
浏览 0提问于2017-12-21得票数 0
回答已采纳
1回答
Webpacker未实时编译
、、、、
我已经运行了我的Rails应用程序并安装了Webpacker。我让webpack-dev-server作为Docker容器运行，但它似乎不能响应我文件中的更改和重新编译。 任何人都可以检查我的配置，看看他们是否能发现任何错误？ docker-compose.yml： version: '3.7'
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- 3000:3000
- 35729:35729
- 5000:5000
浏览 26提问于2019-03-08得票数 8
回答已采纳
1回答
我正在用react-rails构建一个rails 5.2应用程序。
与rails 5.2不兼容，实时重装将与一起工作，我正在努力了解如何配置webpacker以进行实时重新加载。
我在读了一篇文章
我在一个单独的终端实例中运行./bin/webpack-dev-server --inline=false和rails s，但是我不能在webpacker localhost:3035/movies上显示站点。浏览器中的输出是Cannot GET /movies。
我刚刚创建了，不知道webpacker，非常感谢您的任何输入。
浏览 0提问于2018-12-10得票数 2
回答已采纳
我使用的是具有以下配置的webpack：
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
context: __dirname + '/app',
entry: {
app: './app.js',
vendor: ['angular', 'angular-route', '
浏览 1提问于2016-11-05得票数 1
2回答
在这里，我想在我未来的react/webpack应用程序中使用Docker，但我无法正确配置Webpack和/或docker以使重新加载工作(webpack-dev-server )。 我真的不明白为什么，配置对我来说似乎还可以，也许是我的"start“命令不好？ Dockerfile配置如下： FROM node:11-alpine
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
CMD npm start
EXPOSE 8081 这里是Webpack.config.js： const HtmlWe
浏览 51提问于2020-07-27得票数 1
我的项目有这样的结构：
\root
\webpack.config.js
\public
\ index.html
\ ...
\ css
\ directives
\ views
\ dist (webpack output)
\app.js
\ index.html
\ app.js.map
\ style.css
\ style.css.map
当我使用webpack-dev-server时，我从/root启动它，它会加载应用程
浏览 2提问于2017-05-14得票数 5
3回答
下面是我的配置：
devServer: {
contentBase: '/web/dist/',
hot: true,
stats: {colors: true},
inline: true
}
下面是我正在运行的吞咽任务：
gulp.task('build', ['clean', 'styles', 'bower', 'media', 'data', 'homepage'], function(done) {
es6promi
浏览 0提问于2015-05-29得票数 6
回答已采纳
我刚刚完成了我正在做的一个棱角分明的项目，但我注意到控制台里有一些东西，如果可以的话，我很想把它藏起来，让一切保持整洁。
这是webpack开发的服务器模块不断断开和尝试重新连接，并垃圾邮件我的控制台日志。如下所示：
polyfills.js:1919 [webpack-dev-server] Live Reloading enabled.
polyfills.js:1919 [webpack-dev-server] Disconnected!
polyfills.js:1919 [webpack-dev-server] Trying to reconnect...
polyfills.js:
浏览 5提问于2022-05-06得票数 8
2回答
我正在尝试运行webpack -w，但它并没有像预期的那样连续运行。早些时候，它在我的代码中每次保存时都会重新构建。但现在它停止工作了，因为我每次都要运行webpack -w才能进行更改。
如果我需要提供任何其他信息，请告诉我。
//package.json
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
浏览 0提问于2016-06-21得票数 0
我们有一个使用了webpack-dev-server组件的React js站点。当我加载站点的常规版本时，一切似乎都运行正常。问题是，当我加载webpack-dev-server版本时，我无法单击屏幕上的任何元素。经过一些调试后，它看起来像是由于覆盖iframe的-index被设置为-1造成的。
似乎也有同样的问题，但他们的解决方案将"inline“属性更改为true并不能解决任何问题。
其他人有过类似的问题吗？
浏览 0提问于2016-09-02得票数 0
使用以下命令有什么区别
webpack --watch
和
webpack-dev-server --hot
谢谢。
浏览 1提问于2016-06-29得票数 59
回答已采纳
2回答
我正在尝试构建一个符合我需求的react应用启动程序。我已经阅读，下载，测试了无数的react模板，试图理解如何添加SSR，但我现在有点卡住了。
到目前为止，我已经使用热重新加载运行了React。4岁的Webpack捆绑了客户端代码。我使用一个代理和webpack-dev-server (WDS)来为我的后端express api提供服务，以及为我的客户端开发提供服务。当我更新应用程序客户端代码时，WDS热重新加载发生变化。express服务器不会以这种方式重新启动。我使用nodemon来监视服务器的变化，以便在编写api特性时仅重新启动后端。
对于生产环境，我只需将服务器和客户机构建到di
浏览 4提问于2018-07-03得票数 1
当我运行webpack-dev-server时，控制台输出的前三行是：
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./dist
我对为什么要导航到localhost:8080/webpack-dev-server/感到困惑。在过去，我会发现我的应用程序住在localhost:8080。有什么关系？有和没有/webpack-dev-server路径组件的利弊是什么？它会影响热重装吗？
编辑：
热重加载似乎是一个受/webpack-dev-serv
浏览 1提问于2017-09-17得票数 0
当我使用Atom的AutoSave OnChange包运行我的应用程序时，我想要自动运行和自动刷新webpack-dev-server。 我的webpack-dev-server是： devServer: {
contentBase: './src/index.js',
host: '0.0.0.0',
compress: true,
port: 3001, // port number
historyApiFallback: true,
quiet: true,
浏览 39提问于2019-03-08得票数 1
回答已采纳
如何通过Rails 6应用程序与本地的Truffle块链进行交互？我已经用vanilla对FixedSupplyToken应用程序进行了原型化，一切都如预期的那样工作。接下来，我尝试将它移动到Rails 6应用程序中。我对使用Ruby感到紧张(ethereum.rb -寻找一个人来接管维护，其他人似乎被抛弃了)。我想知道您是否可以使用Webpacker将web3.js直接导入Rails 6？我创建了一个新的Rails 6应用程序，并添加了以下内容：
yarn add web3
yarn add truffle-contract
已安装并显示在package.json中：
{
"na
浏览 9提问于2020-01-21得票数 3
回答已采纳
我正在尝试使用Webpack和巴别塔为我的React应用程序设置一个环境。我使用JSX来实现组件，并且我想利用实时重新加载。
这是我的package.json文件：
{
(...)
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
"dependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "
浏览 20提问于2016-07-01得票数 0
在我的节点应用程序中，我试图区分应用程序的开发版本和生产版本。当我运行webpack-dev-server时，我使用以下命令：
公共webpack-开发-服务器--内联--热--内容库。/ NODE_ENV=development
在我的应用程序中，我尝试使用process.env.NODE_ENV读取NODE_ENV中的内容，但结果似乎是空的。这不是使用webpack-dev-server时设置环境变量的正确方式吗？
编辑:这是在我的React应用程序中。我使用Express为生产环境中的应用程序提供服务，但我只是出于开发目的而使用了webpack-dev-server。
浏览 8提问于2017-02-07得票数 2
这是我的webpack.config.js
var path = require('path');
const frontend = {
entry: [
'./src/js/app.js'
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
node: {
fs: 'empty'
},
module : {
rules: [
{
浏览 11提问于2018-01-28得票数 0
3回答
下面是我的webpack.config.js代码
var webpack = require('webpack');
var path = require('path');
module.exports = {
// context: __dirname + "/app",
entry: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
'./src/m
浏览 0提问于2015-11-26得票数 1
现在我开始使用webpack-dev-server为应用程序提供服务。
现在，如果我在VS Code中做了任何导致构建失败的代码更改，webpack-dev-server将重新运行并报告失败，但我在VS代码中看不到这些更改。
我可以使用VS Code typescript模板来做这件事，但是对于相同的代码库，就像多个并行编译一样。
因此，我如何将webpack-dev-server与vs-code集成，以获得与vs-代码相关的编译问题
浏览 2提问于2016-12-21得票数 2
我正在创建一个应用程序，它使用正在开发的webpack-dev-server以及react-router。
看起来，webpack-dev-server是基于这样的假设构建的，即您将在一个地方拥有一个公共入口点(即"/")，而react-router允许无限数量的入口点。
我想要享受webpack-dev-server的好处，特别是热重新加载功能，这对提高工作效率很有帮助，但我仍然希望能够加载在react-router中设置的路由。
如何实现它才能让它们协同工作？你能在webpack-dev-server前面运行一个express服务器，以这样的方式允许这一点吗？
浏览 58提问于2014-10-05得票数 120
回答已采纳
我正在localhost:8000上运行一个localhost:8000应用程序。
我想使用webpack-dev-server来重新加载css、react和js组件。
已将代理设置为http://localhost:8000，但webpack-dev-server 没有重新加载浏览器。
这是webpack.config.js
var path = require( 'path' );
var autoprefixer = require( 'autoprefixer' );
module.exports = {
entry: [
&#
浏览 2提问于2016-12-01得票数 2
1回答
我能够创建角应用程序项目使用尤曼生成器的超级分类账作曲家。
运行由yeoman生成器命令生成的角应用程序时出现以下错误: npm启动。
未能找到多个webpack-dev-server/client? ./src/main.ts模块中的错误:错误:无法在'/home/praval/composer-sample-networks/packages/marbles-network/myapp‘中解析'webpack-dev-server/client?’
浏览 1提问于2017-07-19得票数 0
我正在构建一个带有react的电子通信站点克隆，它运行得非常好，直到我添加了一个'StateProvider.js'，'reducer.js‘，并更新了我的'index.js’，让我的<App />包装成这样：<StateProvider initialState={initialState} reducer={reducer}> <App /> </StateProvider>。现在，当我运行“”时，上面写着：
节点:内部/模块/cjs/加载程序:936抛出错误；^
错误:找不到模块‘ajv-格式’要求堆栈：
/
浏览 5提问于2022-09-22得票数 0
我正在使用webpack-dev-server进行开发，但是在升级到webpack 5之后，当postcss-loader无法解析css文件时，它就会停止。
我通过npx webpack-dev-server启动开发服务器，当我开始在.css中输入新规则时，webpack尝试重新构建我的应用程序，但是由于我还没有完成输入，所以文件中包含了不正确的css规则。因此，由于postcss-loader抛出错误CssSyntaxError，生成失败。然而，这使得webpack-dev-server完全停止了。以前，webpack-dev-server只是忽略了失败的构建，直到webpack成功地构建了
浏览 14提问于2022-07-11得票数 0
回答已采纳
关于如何将我自己的基于服务器的代码添加到webpack-dev-server，或者用express (放弃热模块重新加载)替换webpack-dev-server的基本问题。我希望找到一个类似于server.js的文件，我可以在其中添加我自己的代码。这是一个基本问题，因为每个非静态应用程序都需要自己的服务器代码，但我还没有找到一种直接的方法。我使用的是。我希望在以后投入生产时，很容易删除webpack-dev-server而直接使用express。
浏览 3提问于2016-09-30得票数 0
如果我启动我的webpack-dev-server，它会在localhost:8080/上侦听我的应用程序。我现在想将应用程序的上下文从'/‘移动到'/test’。有没有办法做到这一点？
欢迎大家的帮助。
我的那部分服务器启动webpack-dev- package.json
"devserver": "./node_modules/.bin/webpack-dev-server --host 0.0.0.0 --inline --hot --config webpack.config.devel.js --content-base public/&#
浏览 0提问于2017-01-28得票数 1
3回答
热模块替换-更新但不重新呈现
、、、、
我正在运行一个特快专递服务器，它将充当我的React应用程序的API，这个应用程序是由webpack开发服务器捆绑和服务的。
我正试图让热模块替换开始工作，当我对我的文件进行更改时，我在控制台中得到了如下信息：
但是，除非手动刷新，否则应用程序永远不会重新呈现。不知道这是否相关，但当我更新我的.scss文件时，它无需手动进行刷新，并按我的预期进行更新。
版本：
"webpack": "2.1.0-beta.22"
"webpack-dev-server": "2.1.0-beta.8"
"react-hot-lo
浏览 4提问于2016-10-15得票数 11
回答已采纳
我有以下错误 在我的React应用程序中： The react-scripts package provided by Create React App requires a dependency:
"webpack-dev-server": "3.11.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected hi
浏览 29提问于2021-03-01得票数 2
回答已采纳
1回答
我和webpack一样是Node.js应用程序的新手。在开发期间，我会运行webpack-dev-server来提供我的包，它会创建样式标签，并将所有的css放在上面。既然我不能运行webpack-dev-server，我该如何将css放在生产服务器上的样式标签中呢？
浏览 0提问于2017-04-08得票数 1
我在项目文件夹中运行此命令
npm install --global webpack webpack-dev-server
它返回：
/usr/lib
├── webpack@1.14.0
└── webpack-dev-server@1.16.2
/usr/lib/node_modules下有/usr/lib/node_modules目录下的webpack和webpack-dev-server文件夹，webpack命令起作用，webpack-dev-server命令返回：
webpack-dev-server: command not found
配置j
浏览 5提问于2017-01-11得票数 1
我在本地使用webpack-dev-server来构建我的应用程序。我已经正确地对其进行了配置，并在运行"yarn build“命令时将其生成的文件放入/dist/文件夹中。
有没有办法在本地通过webpack-dev-server使用dist文件夹？我的想法是，我需要在本地运行我的应用程序的多个版本，以测试一些stuf。
浏览 0提问于2019-03-26得票数 5
1回答
我正在使用Xampp进行PHP开发。此外，我在MVC架构下用javascript编写代码。当我在NPM中运行"dev": "webpack --mode development"时，一切正常，并且我看到了bundle.js中的变化。但是当我运行"start": "webpack-dev-server"并转到localhost:8080/js/bundle.js时，我看到了更改，但实际上，它并没有被保存。因为我去了我的虚拟主机，没有任何变化！我如何准确地保存更改？为什么会发生这种情况？这是我的webpack配置： module.e
浏览 10提问于2020-04-10得票数 0
回答已采纳
1回答
我正在尝试用webpack和npm编译我的reactJS应用程序的文件。当我运行时：
npm install --save react-websocket
它工作得很好。下一步，当我执行
npm start
获取以下错误：
> reactapp@1.0.0 start D:\ReactServer
> webpack-dev-server --hot
'webpack-dev-server' is not recognized as an internal or external command,
operable program or batch file.
浏览 0提问于2016-11-07得票数 0
2回答
我正在尝试用webpack-dev-server为webpack-dev-server应用程序使用Dockerfile
FROM node:lts-slim
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
EXPOSE 3000
CMD [ "npm", "start" ]
"start": "webpack-dev-server --port 3000"这条package.json线
docker-compose.yml
version: "3"
servic
浏览 6提问于2020-02-23得票数 2
回答已采纳
安装Windows 10创建者之后，更新webpack-dev-server不再工作了。所发生的情况是，我启动了，它的工作方式与正常一样。然后，当我尝试使用IIS的代理启动webpack-dev-server时，在Visual中会出现以下错误：
程序“14752 iisexpress.exe”的代码为-2147023895 (0x800703e9)。
浏览 1提问于2017-07-17得票数 0
回答已采纳
我正在尝试运行React应用程序，遵循一个教程，，但我在运行react应用程序时遇到了一些问题。更准确地说，当我键入npm start时，请查找下面的错误
npm ERR! Linux 4.4.0-62-generic
npm ERR! argv "/usr/local/bin/node" "/usr/bin/npm" "start"
npm ERR! node v7.4.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactapp@1.0.0
浏览 5提问于2017-02-21得票数 2
2回答
以下是我的React应用程序的webpack.config.js文件
module.exports = {
entry: 'index.js',
output: {
filename: 'bundle.js',
path: '/.'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_com
浏览 0提问于2017-04-11得票数 1
3回答
Webpack传输轮询错误
、、、、
我在我的express/webpack应用程序中有以下任务，它启动了一个webpack-dev-server：
"webpack-dev-server": {
options: {
webpack: webpackConfig,
publicPath: '/assets/',
watch: true,
inline: true,
hot: true,
quiet: true
},
start: {
keepAlive: true
浏览 0提问于2015-07-24得票数 9
在将webpack-dev-server从3.11.0升级到4.4.0之后，当我在Webpack配置文件中使用devServer下的"host“选项时，热重加载不再工作。我的控制台显示WDS连接两次，随后断开连接：
[HMR] Waiting for update signal from WDS...
[webpack-dev-server] Hot Module Replacement enabled.
[webpack-dev-server] Live Reloading enabled.
[webpack-dev-server] Disconnected!
[webpack-d
浏览 4提问于2021-11-09得票数 3
1回答
我已经为我的应用程序配置了WebPack，并添加了webpack-dev-server。它在运行后成功编译，并显示“项目正在上运行”。然而，当我试图在我的浏览器中打开它时，我得到一个“此站点无法访问”的页面，并显示以下错误：
ERR_CONNECTION_REFUSED
任何修复建议都将非常感谢！
我的package.json文件中的代码片段：
"scripts": {
"build": "webpack --config webpack.config.js",
"start:dev": "webpack-
浏览 26提问于2019-03-30得票数 6
回答已采纳
npm审计报告
glob-parent <5.1.2严重性:中等程度的正则表达式拒绝服务-beta无修复程序可用node_modules/webpack-dev-server/node_modules/glob-parent chokidar 1.0.0-rc1 - 2.1.8取决于glob-parent server服务器2.0.0- node_modules/webpack-dev-server/node_modules/chokidar 2.0.0- - 3.11.2取决于chokidar节点模块/ webpack-dev-server @node_modules/webpack
浏览 2提问于2021-09-02得票数 0
我用NPM安装了webpack和webpack-dev服务器.
npm i webpack webpack-dev-server --save
我也做了
npm link webpack webpack-dev-server
现在，当我在我的项目的根上输入webpack时，它说
'webpack' is not recognized as an internal or external command,
可操作的程序或批处理文件。
我讨厌每当我安装什么东西时，我都要手动编辑操作系统的path变量。
有没有更好的方法把这些实用程序.而不编辑我的OS路径变量？
浏览 8提问于2016-01-29得票数 0
我一直在使用带有--inline和--host标志的。这一切都运行得很好。
webpack-dev-server --inline --host example.com
然后，我研究了如何使用和webpack-dev-server API来完成此任务。
var gulp = require('gulp');
var gutil = require('gulp-util');
var Webpack = require('webpack');
var WebpackDevServer
浏览 3提问于2015-01-08得票数 10
我知道我可以编写自己的sbt任务，并且可以在它们之间创建依赖关系。任务层次结构在我看来有点复杂，这就是我正在努力解决的问题：，我不知道我的任务应该依赖于哪些任务，。情况就是这样。
我的Scala/Play web应用程序有一个非常复杂的前端，用JavaScript/React编写，它是用webpack编译的。在开发期间，我使用webpack-dev-server。它更快，并且支持像热重装这样的功能。然而，在生产模式下部署时，我希望使用sbt构建我的前端。这意味着对于sbt start或sbt dist，我希望将我的前端与Scala源代码一起编译，但是对于sbt run，应该完全省略这个阶段(因
浏览 0提问于2016-04-29得票数 3
2回答
我有一些困难，让我的反应应用程序运行。我尝试过多种方法，降低webpack版本的评级，做npm i -g webpack-dev-server，甚至npm i -g webpack-cli，但都没有效果。下面是我收到的错误信息。如能提供任何建议或帮助，将不胜感激。
$ node ../../bin/env.js webpack-dev-server
[dev:main] 'webpack-dev-server' is not recognized as an internal or external command,
[dev:main] operable p
浏览 16提问于2022-09-30得票数 0
我正在运行我的reactjs应用程序，和webpack和gulp，这是我的gulpfile的片段：
gulp.task("webpack-dev-server", function(callback) {
// modify some webpack config options
var myConfig = Object.create(webpackConfig);
myConfig.devtool = "eval";
myConfig.debug = true;
// Start a webpack-dev-serv
浏览 3提问于2016-10-20得票数 1
3回答
当我使用npx create- react -app名称创建一个react应用程序，并尝试启动该应用程序时，我收到错误，退出代码为1，更确切地说，这是一个错误 It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack-dev-server": "3.11.0"
Don
浏览 318提问于2020-08-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
