开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

webpack-dev-server正在编译，但没有创建输出文件？

webpack-dev-server是一个基于webpack的开发服务器，它能够快速地为前端开发提供一个开发环境，并实现热模块替换(Hot Module Replacement)功能。

当webpack-dev-server正在编译，但没有创建输出文件时，可能有以下几个原因：

配置错误：首先要检查webpack配置文件是否正确，特别是output配置是否正确设置了输出文件的路径和文件名。可以通过查看webpack配置文件中的output属性来确定是否有误。
路径错误：检查项目文件结构，确保webpack-dev-server的配置文件、入口文件和输出文件的路径都设置正确。如果路径有误，可能导致webpack-dev-server找不到输出文件的位置。
编译错误：有时候，在编译过程中可能会出现语法错误或其他问题，导致编译失败，从而没有创建输出文件。可以通过查看终端或命令行窗口中的错误信息来找出具体的错误原因，并修复它。
内存中输出：webpack-dev-server默认将输出文件保存在内存中，并通过HTTP服务器提供访问。因此，在编译过程中，实际上并不会在硬盘上创建输出文件。这是webpack-dev-server实现快速编译和热模块替换的一种方式。可以通过访问指定的URL来查看内存中的输出文件。

综上所述，对于webpack-dev-server正在编译但没有创建输出文件的问题，可以从配置错误、路径错误、编译错误和内存中输出等方面进行排查和解决。

（以上答案仅供参考，推荐的腾讯云相关产品和产品介绍链接地址请根据实际情况进行提供）

相关搜索:正在执行vba shell命令，但没有输出 Unix Bash脚本正在运行，但没有输出编译成功但没有显示，正在设置bkcolor [C++14]我正在使用pair，但没有输出 Intellij filewatcher正在将scss编译为CSS，但没有更新服务器文件 tomcat8正在运行，但没有pid文件使用Xcodebuild构建项目成功，但没有输出XArchive文件 PANDAS:成功执行to_excel，但没有输出文件 Mongoose.create正在创建文档，但没有我的数据我正在创建我自己的猜测名称，但程序没有启动 .exe :编译时代码生成了.o文件，但没有生成SOS文件程序应该创建一个包含结果的输出文件，但该文件中没有任何内容正在尝试创建可下载的制表器表，但没有显示任何内容我正在尝试创建登录身份验证页面，但没有返回任何内容 GHC编译为.o和.hi，但没有可执行文件在docker Ubuntu 16.04中编译Linux -没有创建依赖文件 Django:正在创建静态文件，但django无法找到静态文件并查看静态文件夹 Webpack-dev-server在src-file旁边创建js文件，而不是编译成目标bundle-file 正在从CSV文件读取，但大多数情况下没有值自定义链接正在重定向，但URL - Wordpress中没有子文件夹

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

webpack热更新原理(面试大概率会问)_2023-02-28

搭建webpack环境创建一个项目 mkdir dev-erver && cd dev-server npm init -y // 快速创建一个项目配置 npm i webpack webpack-dev-server...webpack-cli --save-dev mkdir src // 创建资源目录 mkdir dist // 输出目录 touch webpack.dev.js // 因为是在开发环境需要热更新，...--config webpack.dev.js --open" }, npm run dev 运行图片我们看到文件已经打包完成了，但是在dist目录里并没有看到文件，这是因为WDS是把编译好的文件放在缓存中...，没有放在磁盘上，但是我们是可以访问到的, output.js 对应你在webpack配置文件中的输出文件，配置的是什么就访问什么 http://localhost:8080/output.js 显然我们想看效果而不是打包后的代码...，所以我们在dist目录里创建一个html文件引入即可， <script src=".

8462 0

webpack热更新原理(面试大概率会问)

搭建webpack环境创建一个项目mkdir dev-erver && cd dev-servernpm init -y // 快速创建一个项目配置npm i webpack webpack-dev-server...webpack-cli --save-devmkdir src // 创建资源目录mkdir dist // 输出目录touch webpack.dev.js // 因为是在开发环境需要热更新，所以直接创建...--config webpack.dev.js --open" },npm run dev 运行图片我们看到文件已经打包完成了，但是在dist目录里并没有看到文件，这是因为WDS是把编译好的文件放在缓存中...，没有放在磁盘上，但是我们是可以访问到的,output.js 对应你在webpack配置文件中的输出文件，配置的是什么就访问什么http://localhost:8080/output.js显然我们想看效果而不是打包后的代码...webpack-dev-middleware利用sockjs和webpack-dev-server/client建立webSocket长连接。将webpack的编译编译打包的各个阶段告诉浏览器端。

1K0 0

【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！

/bundle.js"自然就找到bundle.js了 webpack打包和webpack-dev-server开启服务的区别—— webpack输出真实的文件，而webpack-dev-server输出的文件只存在于内存中...,不输出真实的文件！...6.devServer.stats（字符串）这个配置属性用来控制编译的时候shell上的输出内容，我们没有设置devServer.stats时候编译输出是这样子的：（其中看起来有许多看似不重要的文件也被打印出来了...，当你保存后再次编译的时候不会输出任何内容，包括错误和警告来做个对比吧： quiet：false（默认）：第一次编译：第二次编译（当你保存的时候） ?...quiet:true 第一次编译同上第二次编译什么都不输出【吐槽】这样看的话感觉这个配置好像只有负面作用呢..... 8.devServer.compress 这是一个布尔型的值，当它被设置为true

2.3K7 0

webpack配置React开发环境(上)

/main.js', output: { filename: 'bundle.js' } }; 一些你应该知道的命令： webpack —— 进行一次编译 webpack -p —— 进行一次编译...(压缩成一行) webpack --watch —— 持续编译 webpack -d —— 编译完成后包含一个maps文件 wepack --colors —— 使压缩文件变漂亮(我暂时没看出来) 在开发应用程序时...=production webpack -p" }, // ... } 入口文件入口文件是一个Webpack将会读取它并将它编译成bundle.js的文件 demo01:单个入口文件： //...例如，UglifyJs Plugin将缩小输出（bundle.js）JS代码。...，而没有页面重新加载。

1.6K13 0

webpack使用来打包前端代码

image 运行npm init -y初始化项目，使用npm管理项目中的依赖包创建项目基本的目录结构使用npm i jquery -s安装jquery类库创建main.js并书写隔行变色的代码逻辑...输出文件路径对main.js进行处理： webpack src/js/main.js -o dist/bundle.js 注意如果提示没有webpack-cli,安装: npm install webpack-cli...image 在项目根目录中创建webpack.config.js 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径...webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。..."指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中把bundle.js放在内存中的好处是：由于需要实时打包编译

1.3K1 0

TypeScript的编译与运行

通过本篇内容的介绍，你讲学会如果编译与运行自己的项目。...datas目录，因为我们有点时候为了避免缓存带来的问题，需要在文件后加入哈希，这样多次构筑后就好产生很多没用的文件，而这个插件正好可以自动帮我们清空这些没用的文件。...": "^4.15.1", "webpack-merge": "^5.10.0" } } 这个文件是之前自动创建好的，我们先修改一个入口 "main": "index.js", --> "...总结今天我们将上一篇的内容没有说完的地方补充了一下，并通过编译命令成功的运行和编译完成了我们的第一个示例代码。好了今天的内容就是这些了，我是Tango一个热爱分享技术的程序猿我们下期见。...我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

2590 0

十七.Webpack的使用

输出文件路径对main.js进行处理： webpack src/js/main.js dist/bundle.js 使用webpack的配置文件简化打包时候的命令在项目根目录中创建webpack.config.js...path: path.resolve(__dirname, 'dist'), // 配置输出的路径 filename: 'bundle.js' // 配置输出的文件名...} } 实现webpack的实时打包构建由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后...，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js...文件，这是因为webpack-dev-server将打包好的文件放在了内存中把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快这个时候访问webpack-dev-server

6422 0

55. Vue webpack的基本使用

3.2.6 采用webpack的配置文件进行打包首先创建webpack的配置文件webpack.config.js，如下： ?...那么有没有偷懒的方式，让代码变化的时候，自动去打包编译呢？当然有办法，可以使用webpack-dev-server工具。...image-20200302235055726 打开页面之后，并没有发现输出文件bundle.js，那么直接设置一下路径，看看能否访问：访问：http://localhost:8080/bundle.js...，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。...，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中。

1.5K2 0

Webpack 开发工具与模块热替换

devtool 当 JavaScript 异常抛出时，你常会想知道这个错误发生在哪个文件的哪一行。然而因为 webpack 将文件输出为一个或多个 bundle，所以追踪这一错误会很不方便。...module.exports = { // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试 // devtool: "eval", // 没有模块映射...提示：本教程中的示例代码除了 demo00 ，都可以使用 webpack-dev-server 命令启动服务。在你的文件中做一点更改并且保存。你应该可以在控制台中看到正在编译。...编译完成之后，页面应该会刷新。如果控制台中什么都没发生，你可能需要调整下 watchOptions。默认情况下 webpack 会使用inline mode（内联模式）。...但是，个人建议，一种更好的做法是在 webpack.config.js 文件中通过配置 devServer 属性来配置 webpack-dev-server 。

1.1K6 0

关于Webpack前端工程化构建，你必须要掌握这些核心知识点

引言在很久之前，模块化管理还没有出现，如果我们开发一个页面想要引入一些依赖的话，最常见的做法就是将依赖文件引入到.html文件中。...entry/search.js', list: 'path/to/my/entry/list.js' } }; （2）出口（output） output字段是指定entry对应文件编译打包后的输出位置...webpack-dev-server的默认地址 localhost:8080，就可以默认的index.html页面，如果没有该页面，就会显示文件目录。...# 指定 webpack 的 mode webpack-dev-server --mode development # watch 功能，文件发生变化则触发重新编译 webpack-dev-server...，存放的是webpack编译打包后的文件。

1.8K6 0

正确的Webpack配置姿势，快速启动各式框架！

/path/to/my/entry/file.js'}; 同时，entry还可以是个数组，这个时候「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。...，放在输出目录下，并返其对应的url url-loader在当文件大小小于限制值时，它可以返回一个Data Url html-loader/raw-loader: 把Html文件输出成字符串 html-loader...HtmlwebpackPlugin 功能有下：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个...html文件入口但其实最常使用的，无非是把index.htnm页面插入（因为入口文件为js文件）: 1234 new HtmlwebpackPlugin({template: path.resolve...webpack-dev-server是webpack官方提供的一个小型Express服务器，主要提供两个功能：为静态文件提供服务自动刷新和热替换(HMR) 在实际开发中，webpack-dev-server

1.5K3 0

Vue 07.webpack

src/js/main.js dist/bundle.js webpack配置文件在项目根目录中创建webpack.config.js 运行webpack命令时，webpack需要指定入口文件和输出文件的路径...filename: 'bundle.js' // 配置输出的文件名 } } 执行npx webpack命令 webpack-dev-server webpack实时打包构建由于每次重新修改代码后...，手动运行webpack打包命令比较麻烦，所以使用工具webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。...终端执行npm run dev发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中把bundle.js放在内存中的好处是...：由于需要实时打包编译，所以放在内存中速度会非常快这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下

7862 0

webpack5热更新打包TS

": "^3.11.2" 此时需要在根目录下创建webpack.config.js文件，这个文件的配置在此系列上一篇文章中已经有写过，不过现在需要多增加devServer和plugins配置。...默认值为 “browserslist”，如果没有找到 browserslist 的配置，则默认为 “web” 所以将target设置成为’node’即可， webpack.config.js配置文件中添加...然后赶紧排查原因：热更新JS文件未生成排查原因是否生成到其他文件夹否是否运行脚本错误查看是否devServer配置错误是发现使用热更新命令运行虽然成功了，但是热更新是编译的文件是存放在内存当中的...，所以肯定在相应配置的output输出位置找不到对应的打包文件了如果想要在对应位置热更新后产生相应的输出文件，需要在webpack.config.js中配置devServer时多添加一句：writeToDisk...，通过webpack进行热更新后时时打包生成typescript的编译js文件就完成了 ---- 总结这次的热更新打包过程真的是跌跌撞撞，一个萝卜一个坑。

2.1K1 1

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

有两种创建方式，你可以选择其中的一种： 1.只需创建 package.json 文件，无需任何其他配置： npm init -y 如下所示，package.json 文件已创建，其中包含一些非常基本的信息...": "3.1.8" } } 接着运行以下命令，看看会发生什么： npm run webpack Webpack 将自动获取 src/index.js 文件，编译它，并将其输出到 dist/main.js...这是因为我们还没有配置 Webpack 配置文件。此外，由于我们还没有配置该文件，我控制台中将出现一些警告。...webpack webpack-dev-server 从 src 文件夹中读取所有内容并输出到我们的浏览器中。...我们还没有告诉 Webpack 它应该使用 Babel 和样式加载器来编译我们的 React 和 SCSS 代码。接下来要做的是为 Babel 添加配置文件。

9.4K6 0

vue 学习笔记第四弹 - Webpack

输出文件路径对main.js进行处理： webpack src/js/main.js dist/bundle.js 8....使用webpack配置文件简化打包命令在项目根目录中创建webpack.config.js 在运行webpack命令时，webpack需要指定入口文件和输出文件的路径，因此，我们还要在webpack.config.js...: 'bundle.js' // 配置输出的文件名 } } 9....实现webpack的实时打包构建因为在重新修改代码之后，都需要手动去运行webpack打包命令，不是很方便，所以使用webpack-dev-server来进行代码的实时打包编译，当代码改动之后，会自动去打包构建...目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快

8672 0

webpack4 使用指南

webpack-dev-server webpack-dev-server --help查看参数 --output-public-path -p 指定输出的mode=production -d 指定输入的...html中引用js文件时，必须引用此虚拟路径（但实际上引用的是内存中的文件，既不是/build/js/也不是/assets/）。...发布至生产环境： 1.webpack进行编译（当然是编译到/build/js/） 2.把编译目录（/build/js/）下的文件，全部复制到/assets/目录下（注意：不是去修改index.html...如果你没有给webpack传入mode，会抛出错误，并提示我们如果要使用webpack就需要设置一个mode。...optimization中，但是我们看看官方文档对optimization的介绍简直寥寥无几，而在默认配置的代码中，webpack对optimization的配置有十几项，反正我是怕了这里还有一些其他的配置没有贴出来

8974 0

你需要知道的webpack高频面试题

谈谈你对webpack的看法webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。...代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等代码分割：提取多个页面的公共代码、...模式下url不用发生变化，但启动inline模式分两种情况// 以命令行启动webpack-dev-server有两种方式// 方式1 在命令行中添加--inline命令// 方式2 在webpack-config.js...()等file-loader：直接输出文件，把构建后的文件路径返回，可以处理很多类型的文件url-loader：打包图片// url-loader增强版的file-loader，小于limit的转为Base64...Tree-shaking是指在打包中取出那些引入了但在代码中没有被用到的死代码。webpack中通过uglifysPlugin来Tree-shaking JS。

5082 0

10天从入门到精通Vue(五)Webpack打包

输出文件路径对main.js进行处理： webpack src/js/main.js dist/bundle.js 使用webpack的配置文件简化打包时候的命令在项目根目录中创建webpack.config.js...' // 配置输出的文件名 } } 实现webpack的实时打包构建由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server...来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。...文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成...bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快这个时候访问webpack-dev-server

4823 0

轻松理解webpack热更新原理

首先，我们知道Hash值代表每一次编译的标识。其次，根据新生成文件名可以发现，上次输出的Hash值会作为本次编译新生成的文件标识。依次类推，本次输出的Hash值会被作为下次热更新的标识。...再看下生成的js文件，那就是本次修改的代码，重新编译打包后的。 ? 还有一种情况是，如果没有任何代码改动，直接保存文件，控制台也会输出编译打包信息的。...但是我们发现，并没有生成新的js文件，因为没有改动任何代码，同时浏览器发出的请求，可以看到c值为空，代表本次没有需要更新的代码。 ?...其实就是因为webpack-dev-server只负责启动服务和前置准备工作，所有文件相关的操作都抽离到webpack-dev-middleware库了，主要是本地文件的编译和输出以及监听，无非就是职责的划分更清晰了...直接执行webpack命令就可以看到生成的bundle.js文件啦。不要用webpack-dev-server启动就好了。（1）没有配置的。 ?

2.8K3 0

47. 精读《webpack4.0 升级指南》

使用 webpack cli、webpack-dev-server cli 安装 webpack^4.1.1 webpack-cli^2.0.10 webpack-dev-server^3.1.0，以及创建一个公共配置文件...当然，虽然说零配置，但配置文件基本三板斧还是非常有必要配置：entry output module。...如果仅使用 webpack + typescript，建议将 ts 编译输出模式调整为 es3，因为 webpack 自带的压缩工具对 es6 语法还存在报错，而且也不会做兼容处理。...可能已经有人看出瑕疵了，给每个文件增加 webpackChunkName 注释既麻烦又不优雅，而且只要有一个开发者没有加这个注释，上面说的可读 chunks 可能就缺少了某个模块名。...其实用 cli 只需要 webpack-dev-server --open。随着新的一波零配置浪潮，真的不应该在编译配置上花那么多时间了。

5201 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭