如何使用新的Webpack devServer配置？
Webpack是一个现代化的JavaScript应用程序的静态模块打包器。它主要用于将各种资源，如JavaScript文件、样式表、图片等，打包成一个或多个静态资源文件，以便在浏览器中加载。
Webpack devServer是Webpack提供的一个开发服务器，用于在开发过程中提供实时的编译和热更新功能。它可以帮助开发人员在本地快速启动一个开发服务器，并自动编译和刷新页面，提高开发效率。
要使用新的Webpack devServer配置，可以按照以下步骤进行操作：
- 在项目根目录下找到webpack.config.js文件，这是Webpack的配置文件。
- 在配置文件中找到devServer字段，如果没有则可以手动添加。
- 在devServer字段中配置所需的选项，例如：
devServer: {
contentBase: path.join(__dirname, 'dist'), // 指定静态文件的根目录
port: 8080, // 指定开发服务器的端口号
hot: true, // 启用热更新功能
open: true, // 自动打开浏览器
},上述配置中，contentBase指定了静态文件的根目录，port指定了开发服务器的端口号，hot启用了热更新功能，open设置为true表示自动打开浏览器。
- 保存配置文件，并重新运行Webpack命令，例如：
npx webpack-dev-server --config webpack.config.js- 等待Webpack编译完成后，可以在浏览器中访问指定的地址（例如http://localhost:8080）查看应用程序。
总结一下，使用新的Webpack devServer配置可以通过修改Webpack配置文件中的devServer字段来实现，配置项包括contentBase、port、hot、open等。这样可以快速启动一个开发服务器，并实现实时编译和热更新的功能。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我有一个配置文件，在webpack devServer配置和webpack devServer配置中，我定义了一个快速的中间件函数：
devServer: {
before(app){
init(app);
},
...
}
其中init是表单的函数：
init(app){
app.get('/endpoint', (req,res,next)=> {...;debugger; next();});
...
}
如何调试这段webpack-开发-服务器代码？
如果我可以直接在VSCode中调试它，我会更喜欢，但如果需
浏览 21提问于2018-02-26得票数 3
回答已采纳
我正在尝试让Webpacks的DevServer HMR功能在我的设置上工作。看起来是这样的：
containerDocker QuasarJS CLI通过ngrok隧道访问本地码头容器中的MYAPP的Webpack DevServer
码头港口
0.0.0.0:8201->8201/tcp
ngrok配置：
Forwarding https://MYAPP.ngrok.io -> http://localhost:8201
Webpack DevServer配置(Webpack版本: 5.59.1)
devServer: {
port: 8201,
headers
浏览 2提问于2021-10-26得票数 0
回答已采纳
1回答
我正在使用webpack开发服务器为我的资产服务于本地开发。我的paramters.yml.dist中有以下内容
# local assets devserver address
# if you want to use webpack dev server use "http://localhost:8090"
# and then > npm run devserver
assets_base_url: ~
我在本地环境的框架中有以下内容。
framework:
assets:
base_urls: ["%assets_base_url
浏览 0提问于2016-04-08得票数 2
我使用的是Vue JS，使用的是webpack模板和开发模式。
如何让服务器的一部分使用HTTPS协议，另一部分使用HTTP？
我知道使用HTTPS只需在build/webpack.dev.conf.js文件的devServer变量中添加"https: true“即可。示例：
devServer: {
https: true,
// other variables...
}
但当我这样做时，只接受HTTPS请求，不再接受HTTP。
如何同时使用这两种协议？如果不可能，有没有一种VueJS方法可以将HTTP请求重定向到HTTPS？
浏览 27提问于2018-08-03得票数 0
我会配置并启动基于webpackDevServer的本地react项目，它在浏览器页面上显示得很好，但是当我打开我的开发工具时，它只是不断地解决以下错误，显然，webpackDevServer是断开连接和重新连接的一次又一次。
WebSocketClient.js:13 WebSocket连接到'ws://localhost:3003/ws‘失败: webpack-dev-server事件{isTrusted: true，type：'error'，目标: WebSocket，currentTarget: WebSocket，eventPhase: 2，…}
我的本地
浏览 11提问于2021-12-25得票数 3
我使用create-next-app创建了我的next.js项目锅炉板。但是，只要运行npm run dev，就会得到错误：
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration[0].node should be one of these:
false | object { __dirname?, __filename?, gl
浏览 6提问于2021-06-18得票数 6
回答已采纳
请问有没有类似的配置，像这样的webpack开发服务器的配置：
devServer : {
historyApiFallback : true,
stats : 'minimal',
contentBase: helpers.root('../src/static'),
}
我想从静态目录中提供静态文件，就像webpack开发的服务器如何提供文件一样。谢谢
浏览 0提问于2017-06-20得票数 21
在上浏览应用程序时，我可以从访问相关的属性值，但不能通过使用webpack的devserver。
webpack.dev.js (devserver)
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
浏览 2提问于2020-09-23得票数 0
回答已采纳
1回答
我已经用npx create-electron-app electron --template=webpack创建了一个电子伪造应用程序。
然后我做了npm install webpack-dev-server
在我的webpack.renderer.config.js中，我开始添加一个带有proxy和before节的devServer节，但是当我使用npm run start时，这些部分将被忽略。
npm运行启动运行electron-forge start，我认为问题就在那里，因为我无法直接访问webpack的呼叫以获得webpack serve ...
webpack的电子开发服务器需要什
浏览 3提问于2021-04-01得票数 0
我正在尝试设置非标准的webpack-dev-server代理配置。
以下阅读：
基本上，我的本地web服务器web根是：http://website.dev，我的本地资产服务器是http://website.assets
我想配置webpack-dev-server来代理我现有的站点，这些站点由http://website.dev提供服务，并且代理它的javascript资产，这些资源将由http://website.assets提供。
这是我尝试过的：
var webpackConfig = {
output: {
path: '../dis
浏览 5提问于2016-03-11得票数 4
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
回答已采纳
在vuepress中，我想为webpack devServer做一些配置，如下所示：
module.exports = { //... devServer: { https: true } };
但我不知道我可以在哪里配置它。有人知道吗？
在..vuepress\config.js中，如下所示进行配置，但它不起作用。
module.exports = { chainWebpack (config, isServer) { } }
非常感谢。
浏览 45提问于2020-05-23得票数 2
我想定制Nuxt dev-server，但我在文档中找不到任何解释如何做到这一点的东西。
看起来命令nuxt dev启动一个带有热模块替换的webpack-dev-server，但是如果我用一个用于devServer的中间件扩展了webpack配置，什么都不会发生。
我的nuxt.config.js
export default {
build: {
extend(config){
config.devServer = {
before: function () {
console.log('I would like to d
浏览 2提问于2021-06-13得票数 0
2回答
我使用的是react-app-rewired，我想禁用每次编译时出现的类型记录警告的覆盖。由于我不明白的原因，VSCode类型记录检查器没有被选中的警告出现在覆盖层上；webpack是一个更严格的执行者(实际上比我希望的更严格)。
无论如何，我尝试了react-app-rewired start --no-client-overlay，我尝试了这个作为我的config-overrides.js文件：
module.exports = {
webpack: function (config, _) {
config.devServer = {
cl
浏览 10提问于2022-02-09得票数 0
回答已采纳
我正在创建webpack配置。我已经安装了devserver模块，并将其配置为在端口9000上运行，而webpack则监视文件更改。
目前，当我运行npx webpack时，命令提示符不会返回，所以我假设webpack正在观看。然而，如果我访问http://localhost:9000，我的浏览器基本上会对我耸耸肩。“本网站无法到达”
如果我使用以下方法检查端口上的活动：
netstat -tunlp | grep 9000
..。什么都不回。没有人在监听那个端口号。
这是我的配置：
const HtmlWebpackPlugin = require('html-webpack-plu
浏览 3提问于2022-01-13得票数 1
我用Webpack的来方便当地的发展。我正在开发一个页面应用程序，所以我启用了historyApiFallback
common.devServer = {
outputPath: path.join(__dirname, 'www', outDir),
historyApiFallback: true
};
但是，每当我试图浏览到包含句点(如/ui/alerts/map.postplay)的url时，我就会得到
无法获得/ui/警报/map.postplay
我如何说服webpack-dev-server允许我使用这些urls？
浏览 3提问于2016-07-25得票数 12
回答已采纳
在我的角度项目中，如果我们使用应用程序，如果我们使用raw-loader@1.0.0，则编译和工作都很好。然而，如果我们使用2.0.0版本，应用程序就无法工作。1.0.0和2.0.0版本之间有什么区别？
webpack.config.ts
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.ts',
resolve: {
浏览 1提问于2019-06-05得票数 6
从命令行/NPM脚本运行webpack-dev-server时，如何获取我的webpack.config.js文件中的webpack-dev-server实例的端口号？我不能只使用devServer对象中定义的端口号，因为如果发生端口冲突，服务器会递增该端口号(因为同时服务于另一个项目)。谢谢!
浏览 2提问于2017-08-24得票数 0
我想使用以下URL中的模板创建一个本地开发环境。我正在试着遵循这些步骤。当我运行npm run dev时，我得到一个错误。在这种情况下，我不知道该怎么办。有人能帮帮我吗？ 网址：https://github.com/puikinsh/Adminator-admin-dashboard [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
浏览 39提问于2021-09-07得票数 0
我正在研究一个2020年的在线课程，老师用webpack在javascript中包含图片和CSS。然而，webpack似乎经历了2020年至2022年的更新。从v3到v4，根据。
似乎其他人也有同样的问题，问了同样的问题，我试过使用他们使用的解决方案，但我没有取得任何成功或进展。
我的目标是能够正确配置webpack.config.js文件，使用webpack-dev服务器，当我们使用babel和webpack对JS进行任何更改时，该服务器负责自动重新加载浏览器。
我的webpack.config.js文件的配置最初如下所示：
const path = require('path
浏览 10提问于2022-09-16得票数 0
回答已采纳
如果在hot: true Webpack中的devServer设置中设置了CSS，那么CSS的热模块替换就可以工作，并且这些更改将在不需要完全重新加载页面的情况下应用。但是，当更改文件时，由于某种原因，LiveReload无法工作，因此需要手动刷新页面，以便应用更改。
如果在hot: true配置文件中禁用了devServer，那么当更改LiveReload时，页面会重新加载自己，但是热模块替换无法工作，当更改CSS时，页面将完全重新加载。
应该是这样吗？为什么会发生这种情况，我如何启用热模块替代，但同时在更改文件时使LiveReload工作呢？
要创建许多HTML文件，我使用HtmlWebp
浏览 3提问于2020-03-18得票数 2
回答已采纳
如果我启动我的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
2回答
当我尝试访问此URL时，我希望：
到此地址的代理重定向请求：
我在端口8082上有一个api，它返回JSON。
在我当前的配置文件中，它适用于：
但不是：
123456可以是任何数字，它是一个路由参数，我应该在我的配置中更改什么？
我有以下devServer配置文件：
devServer: {
hotOnly: true,
index: 'index.html',
port: 8080,
proxy: {
'/activites-digitales': 'http://localhost:8082/&#
浏览 3提问于2018-03-28得票数 1
我使用Webpack开发服务器和通过HTML5历史API操纵urls。在我的webpack配置文件中不工作。在刷新http://localhost:8080/users或http://localhost:8080/products之后，我得到了404。
webpack.config.js
var webpack = require('webpack');
var merge = require('webpack-merge');
const TARGET = process.env.npm_lifecycle_event;
var common = {
浏览 6提问于2016-05-17得票数 32
回答已采纳
我配置了webpack，当我在本地运行webpack-dev-server --inline --config webpack.js时，我正在工作。
现在我正在远程运行这个命令，同时仍然在读取我的本地文件，但热重新加载不起作用。需要更改哪些配置才能让webpack从本地读取文件更改。
我尝试了很多我在这附近发现的东西，但都没有成功。
devServer: {
contentBase: 'src',
hot: true,
inline: true,
port: 8080,
}
浏览 0提问于2019-11-11得票数 0
1回答
在我的项目中安装了Invalid Host header之后，我将获得node_modules。然后我搜索了一下，找到了。但是不要在webpack.config.js中添加这一行。
devServer: {
compress: true,
public: 'store-client-nestroia1.c9users.io' // That solved it
}
有人能帮我做同样的事吗？
编辑 1：我在webpack.config.dev.js中添加了它，但仍然没有运气
谢谢！
浏览 0提问于2019-01-16得票数 0
回答已采纳
webpack.config.js无法识别ES6语法
守则如下：
devServer: {
...webpackDevServerProxy(proxyConfig),
historyApiFallback: true,
port: 3000
}
throw error:
...webpackDevServerProxy(proxyConfig),
^^^
SyntaxError: Unexpected token ...
浏览 0提问于2019-07-08得票数 1
回答已采纳
1回答
我试着按照教程用webpack-dev-server来设置一个webpack开发服务器，但是因为它不能在webpack-cli v4上工作，所以我决定使用webpack-serve (3.2.0版)。我的文件夹结构看起来像this。index.js和test.js捆绑在一起，它们应该记录一些数字和一个字符串到控制台，dist文件夹中的index.html连接到bundle.js。我的package.json是： {
"name": "forkify",
"version": "1.0.0",
"descrip
浏览 20提问于2020-10-17得票数 3
我想在使用create-react- devServer创建的应用程序中自定义webpack应用程序配置，如下所示： devServer: {
disableHostCheck: true,
} 我尝试将其添加到我的启动脚本中，如下所示： "scripts": {
"start": "react-scripts start --devServer.disableHostCheck=true",
"build": "react-scripts build",
"t
浏览 9提问于2020-12-27得票数 0
我用react和webpack来构建插件文件，因为我需要在bundle.js文件名中添加版本以防止在部署后缓存，所以我使用了'html-webpack- plugin‘插件，并且我遇到了一个问题，你可以在这里看到：
我的webpack配置：
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'
浏览 0提问于2019-04-11得票数 4
4回答
我用Rails 5.1.4、WebPacker3.0和Vue.js建立了一个新项目，我用webpack文档安装了Rails。当我用我的Procfile攻击领班时，Vue部分失败了。
我认为wepacker足够聪明，可以安装所有基本的东西来运行应用程序.
编辑：包执行rails webpacker:install:vue给我的这个，仍然不工作
const { dev_server: devServer } = require('@rails/webpacker').config
const isProduction = process.env.NODE_ENV ===
浏览 5提问于2017-12-28得票数 0
1回答
在使用开发服务器时，我试图在文件中写入输出，但是我遇到了一个错误-
been initialized using a configuration object that does
not match the API schema.
- configuration has an unknown property 'devMiddleware'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, e
浏览 1提问于2022-05-26得票数 0
我和webpack一起实现了HMR，它工作得很好。当我更改控制台中已更新的内容时，但由于我将其用于服务器包，因此我想知道在HMR完成后，如何向浏览器发送信号以重新加载，或者更好的是，如何在不刷新浏览器的情况下进行热交换？
它正常工作在客户端，我使用webpack开发服务器，但在服务器端，我使用webpack/热/民意测验，我需要手动刷新后，每次更改，才能在浏览器中看到它？
webpack.config.server.js
module.exports = {
...
watch: true,
target: 'node',
node: {
__dirna
浏览 2提问于2017-06-07得票数 3
我有一个反应组件库，它是捆绑使用汇总。我想添加柏树组件测试，以便我可以使用柏树单元测试那些组件。
Cypress目前支持设置使用webpack' bundler or vite` ` bundler进行反应的自动配置。
export default defineConfig({
component: {
devServer: {
bundler: 'vite', // or it can be webpack
framework:'react',
}
},
如果除了webpack或vite之外，我们还需要从
浏览 18提问于2022-08-04得票数 1
Webpack已经配置了以下devServer配置：
devServer:{
port: 8080,
host: 'localhost',
publicPath: 'http://localhost:8080/',
...
}
如何知道dev服务器的根目录在哪里？来自webpack的，有一个设置devServer.contentBase，我的配置中没有这个设置。
devServer.contentBase (布尔字符串数组)
告诉服务器从哪里提供内容。只有当您想要提供静态文件时，才需要这样做。devServer.publicPath将用于确定应
浏览 2提问于2018-05-03得票数 3
回答已采纳
我正在和webpack一起做一个服务器端反应节点项目。我在控制台上有太多的错误，从昨天起我就一直找不到答案。我希望有人花时间帮我。这是最后一个错误：
ERROR in ./src lazy ^\.\/.*$ namespace object ./main
It's not allowed to load an initial chunk on demand. The chunk name "main" is already used by an entrypoint.
主要的问题是webpack有点节点。
以下是服务器的设置：
import express
浏览 7提问于2020-03-17得票数 7
回答已采纳
当我使用webpack4.2.0，播放'run start‘时，显示以下错误：
配置中的警告'mode‘选项尚未设置。将“mode”选项设置为“开发”或“生产”，以启用此环境的默认值。
multi (webpack)-dev-server/client?出错。/src模块未找到:错误:无法在'/Users/xudengwei/projects/xudengwei/myOpenGithub/angular5-scaffold‘@ multi (Webpack)-dev-server/client？中解析' ./src’。/srcℹ“wdm”：编译失败。
我的配置
浏览 37提问于2018-04-02得票数 8
我知道webpack 5使用http代理中间件来代理http请求，但是我正在尝试安装一个dev服务器，并且很难调试为什么我的代理不能工作，因为我看不到任何记录正在发生的事情，好或坏。
http中间件有一个logLevel属性，但这似乎不是webpack配置传递的(或者我做错了)。
我确实在webpack身上发现了一些叫做"infrastructureLogging“的东西，但在这件事上运气不佳，我不确定这是用来调试我的插件和加载器(添加在webpack.config中)，还是包含诸如http-代理中间件之类的内部依赖项。对于像我这样的新手来说，医生是很模糊的。
当我运行启动devSer
浏览 14提问于2022-07-29得票数 2
使用开发一个通用的JS应用程序，我试图配置，以便在开发过程中只将对/api的请求代理到http://127.0.0.1:500/api，在那里它们将到达Python。在Nuxt文档之后，我使用了 in nuxt.config.js，如下所示：
build: {
extend (config, { isDev }) {
// Proxy /api to Python only in dev
if (isDev) {
const devServer = {
proxy: {
'/api': 'http://
浏览 4提问于2018-09-07得票数 7
回答已采纳
我试图在子目录(public)中运行webpack dev服务器，这样我就可以将其集成到现有的站点中。
当我使用npm run start从子目录运行它时，无论是热重新加载还是编译工作，但是当我在没有--content-base或devServer.publicPath的根目录下运行它们时，都可以正常工作。
文件夹结构-
|- App/
|- node-modules/
|- public/
|- react/
|- main.js
|- index.html
|- shared/
|- reac
浏览 0提问于2017-05-19得票数 2
我正在思考我的反应/webpack，我已经建立了一个简单的反应my应用程序。在app.js里我得到了：
class Application extends React.Component {
render() {
console.log('testing ')
return <div>
<h1>Hello, ES6 w React 0.13!</h1>
</div>;
浏览 2提问于2017-02-08得票数 0
回答已采纳
我正在试着让webpack和PHP一起工作。
到PHP内置rest服务器的代理可以工作，但它失去了监视index.php和其余PHP文件的更改的能力。查看js文件可以正常工作。
Package.json
"devDependencies": {
"webpack": "^2.1.0-beta.21",
"webpack-dev-server": "^1.15.0"
},
"scripts": {
"backend": "cd src &&a
浏览 1提问于2016-08-31得票数 4
当我使用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
回答已采纳
我用Webpack做了一个反应项目，似乎以一种我不明白的奇怪的方式影响了。
它似乎允许我浏览到index.html，无论该文件在代码库中的位置，这是不可能仅使用dev服务器的。
假设我有以下目录结构：
myproj/
|- package.json
|- webpack.config.js
|- src/
|- index.html
|- index.jsx
和一个类似于这样的webpack.config.js文件：
const path = require('path');
module.exports = {
entry: '.
浏览 0提问于2018-04-23得票数 7
回答已采纳
2回答
当webpack配置在子文件夹中时，如何配置开发服务器的devServer.contentBase？
目录结构：
-config
-- webpack.config.dev.js
- dist
- src
- index.js
- package.json
webpack.config.dev.js (在config目录中)：
// Configure output directory
output: {
path: __dirname + '/../dist',
publicPath: '/',
filename: '[name
浏览 0提问于2020-02-18得票数 0
devServer: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api/**': {
target: 'http://xyz.dev2.lokal:8888/',
changeOrigin: true,
proxyTimeout: 10 * 60 * 1000,
onProxyReq: (proxy
浏览 18提问于2020-05-11得票数 0
回答已采纳
我仍然在学习Vue，所以我很难找到如何将内联css转换为css文件。
如果有人能帮我把css(scss)解压缩成一个css文件，我将不胜感激！
或者，这会辜负vue限定范围的风格的目的吗？
这是我的webpack.config代码：
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './
浏览 1提问于2017-07-06得票数 1
回答已采纳
我已经创建了构建应用程序的webpack配置文件，使用webpack- dev -server运行开发服务器，并运行测试套件，如下所示。
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 3000,
watchOptions: {
open: false
},
historyApiFallback: {
index: "/"
}
},
plugins: [
new WebpackShellPlugin({
onBuildEnd: [`.
浏览 1提问于2018-12-14得票数 1
我让scss模块在我的开发环境中工作，但是当我部署到生产中时，我的样式不会被编译/应用。如何配置webpack，使我的开发和生产环境保持一致？我知道webpack的档案很乱，但是如果有人能指出我做错了什么，我会很感激的。
webpack.base.js
const path = require('path')
const Dotenv = require('dotenv-webpack')
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = opti
浏览 0提问于2019-11-29得票数 0
回答已采纳
1回答
由于某些原因，我无法启动和运行我的Vue项目。我有另一个项目，具有完全相同的设置和版本，工作正常，但在此安装过程中，我收到以下错误：
ERROR in ./app/javascript/components/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
这是我的package.json文件：
{
"dependencies": {
"@rails/webpacker": &
浏览 2提问于2018-10-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
