开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

运行webpack-dev-server时，Rails看不到由webpack编写的编译文件

可能是由于以下原因导致的：

配置问题：确保webpack-dev-server的配置正确，并且已经将编译后的文件输出到了Rails的public目录下。可以检查webpack.config.js文件中的output配置项，确认输出路径是否正确。
路径问题：Rails可能无法正确地找到webpack编译后的文件，这可能是由于文件路径不正确导致的。可以检查webpack.config.js文件中的publicPath配置项，确保路径与Rails的public目录相匹配。
缓存问题：有时候浏览器会缓存旧的编译文件，导致Rails无法看到最新的文件。可以尝试清除浏览器缓存或者在webpack-dev-server的配置中添加一些缓存相关的选项，如添加--no-cache参数。
依赖问题：确保Rails项目中已经正确安装了webpack和webpack-dev-server的依赖。可以检查package.json文件中的dependencies和devDependencies，确认相关依赖是否已经安装。

如果以上方法都无法解决问题，可以尝试以下步骤：

重新启动webpack-dev-server和Rails服务器，确保两者都正常运行。
检查Rails项目中的配置文件，如config/webpacker.yml，确保配置正确。
检查Rails项目中的相关代码，如application.html.erb文件中是否正确引入了webpack编译后的文件。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库（TencentDB）等。具体产品介绍和链接地址可以参考腾讯云官方网站：https://cloud.tencent.com/

相关搜索:修改JSON文件时，如何使用webpack-dev-server和sass-loader编译Sass？由Webpack编译的CSS文件包含Javascript变量和函数 docker webpack编译的文件在运行时丢失运行由pyinstaller生成的exe文件时出错无法在命令行中运行由eclipse编译的类文件当我尝试运行我的webpack-dev-server时，它给出了以下错误，该模块未找到 Webpack-dev-server似乎在运行，但当我尝试访问端口时，收到‘无法访问此站点’的提示通过nodejs运行编译器时如何记录webpack构建的输出并观看调试由webpack构建的捆绑的javascript文件时，chrome不显示原始变量名 Rails 3:如何在运行测试时包含"lib"目录中的文件？android中xml文件的解析发生在运行时还是编译时？当android应用程序打开JavaScript时，我如何编写运行它的html文件？运行用1990年可执行文件编写的C代码。现在重新编译，在旧文件上得到读取错误如何在运行tsc (TypeScript编译器)时复制dist或package.json文件夹中的编译当在系统中打开任何excel文件时，也会出现由windows窗体(vb.net)在后台运行的excel文件在Rails的rspec中，我如何编写/编辑我的测试文件，以便特定上下文中的示例按设定的顺序运行？似乎在运行时看到的libffi库的版本与在编译时看到的'ffi.h‘文件不同 Golang交叉编译的OSX二进制文件在net/http.Get()中运行VPN时挂起

相关搜索:

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

有帮助

没帮助

相关·内容

如何使用本地 Docker 更好地开发？我们总结了这八条经验

我们的开发环境一般包括（通过 Docker Compose 编配）：应用程序（例如 Rails、Django 或 Phoenix）； JavaScript 监视器 / 编译器（例如 webpack-dev-server...2 非必要不使用 Dockerfile 基于第一点，你可能会发现根本不需要编写 Dockerfile 文件。...举个例子，假设有个 Rails 应用程序使用一个共享的镜像来运行开发服务器和 webpack-dev-server，那么配置可能像这样： services: rails: image: appname_rails.../bin/webpack-dev-server 这样，当我们在构建服务（使用 docker-compose）时，镜像就只构建一次。...:/app - yarn:/app/node_modules 这样，在 Rails 开发服务器完全启动并运行之前，webpack-dev-server 是不会启动的。

2.1K4 0

三分钟使用webpack-dev-sever搭建一个服务器

webpack-dev-server是一个小型的Node.js Express服务器,我们可以通过它搭建一个本地服务器,并且实现文件热更新; 1.切换到你的目录下对项目进行初始化 npm init 一顿...它们真正的区别是，npm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖。...": "^3.10.0" } } 3.安装webpack-dev-server npm install webpack-dev-server --save-dev 安装成功之后你的可以看到依赖文件多出来一个...: "/assets/",//指定资源文件引用的目录 filename: "bundle.js"//输入文件 } } 新建index.html引入asset/bundle.js,你在本地是看不到这个...bundle.js的,它其实存在了内存中,想看编译后的代码可以去build下找 <!

1.1K8 0

vue-cli

Rails 有一个重要的指导思想，即约定大于配置, 它为 Web 应用的大多数需求都提供了最好的解决方法，并且默认使用这些约定，而不是在长长的配置文件中设置每个细节。...Rails 对于前端开发影响也很深远，比如在 Nodejs 出来之前，Rails 社区就开始使用 coffeescript + sass预编译语言进行前端开发了, Asset Pipeline可以说是最早的...来加速 JS 和 TS 编译 babel-loader 开启了 cache 编译速度号称是 webpack 的两倍可升级性支持升级 cli-service, 插件需要单独升级, 插件需要遵循语义化版本...以 serve 命令为例，获取到 webpackConfig 后会创建一个 webpack 编译器，并开启 webpack-dev-server 开发服务器....这两个库是 vue-cli 插件的重要成员 webpack-dev-server: webpack 开发服务器，支持代码热重载，错误信息展示，接口代理等等 webpack-bundle-analyzer

3.1K1 0

webpack使用来打包前端代码

使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令在项目根目录中运行npm...语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；运行webpack 入口文件路径输出文件路径对main.js进行处理： webpack src...由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。...来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server..."指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中把bundle.js放在内存中的好处是：由于需要实时打包编译

1.3K1 0

3-8 使用 WebpackdevServer 提升开发效率

目前这两种方案都是 okay 的，但是我们的网页文件开发出来一般肯定是放在网上供其他用户浏览的，另外，file 协议也会遇到跨域问题，所以开发时应该使用 http 协议。...频繁编译和刷新我们编写代码以后如果想要更新网页内容，需要在编写代码后，需要重新运行一遍打包命令，然后刷新网页，才能看到新增的代码生效。...说明我们修改源文件后，webpack 自动帮我们做了编译。事实上，启用 Watch 模式。意味着在初始构建之后，webpack 将继续监听任何已解析文件的更改。Watch 模式默认关闭。...5. webpack-dev-server 上面我们已经讲到了，html 文件应该展示在服务器上。...使用 watch 能够帮助我们监听文件的变动从而自动编译，但是我们仍然要手动刷新压面才能展示新的内容，因为服务器是 ide 帮我们建立的，那么 webpack 是否能帮助我们建立服务器，并且提供一些配置

6172 0

前端工程化 - Webpack 常见面试题速查

文件的能力 Plugin 为插件 Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件...# 编写 Loader 或 Plugin 的思路 Loader 像翻译器，将读到的源文件内容转义成新的文件内容，并且每个 Loader 通过链式操作，将源文件一步步翻译成想要的样子。...编写 Loader 时要遵循单一原则，每个 Loader 只做一种“转义工作”。...# bundle、chunk、module 是什么 bundle：是由 webpack 打包出来的文件 chunk：代码块，一个 chunk 由多个模块组合而成，用于代码的合并和分割 module：是开发中的单个模块...，在 webpack 的世界，一切皆模块，一个模块对应一个文件，webpack 会从配置的 entry 中递归开始找出所有依赖的模块 # Webpack 的构建流程是什么 Webpack 的运行流程是一个串行的过程

4674 0

轻松理解webpack热更新原理

其实就是因为webpack-dev-server只负责启动服务和前置准备工作，所有文件相关的操作都抽离到webpack-dev-middleware库了，主要是本地文件的编译和输出以及监听，无非就是职责的划分更清晰了...这个方法主要就做了 2 件事：首先对本地文件代码进行编译打包，也就是webpack的一系列编译流程。其次编译结束后，开启对本地文件的监听，当文件发生变化，重新编译，编译完成之后继续监听。...入口文件还有一个文件没有讲到，就是： 'xxx/node_modules/webpack/hot/dev-server.js' 这个文件的代码同样会被打包到bundle.js中，运行在浏览器中...首先你可以对比下，配置热更新和不配置时bundle.js的区别。内存中看不到？直接执行webpack命令就可以看到生成的bundle.js文件啦。...还是建议提前了解以下知识会更好理解热更新： websocket：websocket基础知识了解打包后的bundle文件如何运行的。 webpack启动流程，webpack生命周期。

2.7K3 0

Vue webpack的基本使用

那么有没有偷懒的方式，让代码变化的时候，自动去打包编译呢？当然有办法，可以使用webpack-dev-server工具。...image-20200302235520223 总结一下：使用 webpack-dev-server 这个工具，来实现自动打包编译的功能由于每次重新修改代码之后，都需要手动运行webpack打包的命令...运行cnpm i webpack-dev-server -D 安装到项目本地开发依赖安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错。...此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包...在package.json文件中编写scripts，如下： "scripts": { "dev": "webpack-dev-server" }, 注意： webpack-dev-server

1.5K2 0

React 测试驱动教程

设置 Webpack 本教程不是一个教如何使用 webpack，所以我不会详细说，但重要的是要了解基本的东西。 Webpack 就像 Rails 中的 Assets Pipeline 一样。...让我们继续，当 bundle.js 编译后，将其放到 /dist 文件夹中： # /dist/index.html <!...我们还定义了 3000 端口，使得更像是 Rails 开发的体验。最后，在 webpack 配置文件中添加一个 resolve 标记，使进口文件看起来更直观。...AirBnB 写的一个很漂亮的测试库。安装这些包： npm i mocha chai sinon --save-dev 如果我们希望能够使用 ES6 编写测试，那么我们需要在运行前对代码进行转译。...npm i yargs -S 现在我们可以通过创建一个 Karma config 文件去监视我们的文件，当文件发生修改时重新运行并很快地保存。

4.6K2 0

我是如何调试 Webpack 问题的

全文 3000 字，欢迎点赞转发事情是这样的，前两天有个小伙伴问我：「为啥我的 webpack 运行完看不到我写的页面，而是：」嗯？文件列表页？...所以问题的核心就是：「为何 Webpack 的 output.publicPath 会影响 webpack-dev-server 的运行效果」？...嗐，其实这段描述就非常不明所以了，简单理解 output.publicPath 会改变产物资源在 html 文件的路径，比如说 Webpack 编译完生成了 bundle.js 文件，默认情况下写到 html...属性影响到首页资源的判定逻辑，导致 webpack-dev-server 找不到对应的资源文件，返回兜底的文件列表页面。...：这个应该大多数人没有注意过，从官网文档判断这是一个桥接 Webpack 编译过程与 express 的中间件 serve-index：「提供特定目录下文件列表页面的 express 中间件」！！！

1.1K3 0

我是如何调试 Webpack 问题的

事情是这样的，前两天有个小伙伴问我：「为啥我的 webpack 运行完看不到我写的页面，而是：」 ? 嗯？文件列表页？好吧，这种情况我似乎没遇到过，一下子没法给出答案，只能要来关键代码： ?...所以问题的核心就是：「为何 Webpack 的 output.publicPath 会影响 webpack-dev-server 的运行效果」？...嗐，其实这段描述就非常不明所以了，简单理解 output.publicPath 会改变产物资源在 html 文件的路径，比如说 Webpack 编译完生成了 bundle.js 文件，默认情况下写到 html...属性影响到首页资源的判定逻辑，导致 webpack-dev-server 找不到对应的资源文件，返回兜底的文件列表页面。...：这个应该大多数人没有注意过，从官网文档判断这是一个桥接 Webpack 编译过程与 express 的中间件 serve-index：「提供特定目录下文件列表页面的 express 中间件」！！！

2.9K3 0

Vue项目碰到‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件报错

最近公司里做vue项目，svn了前端同事的项目代码，装好环境，运行项目（安装步骤随便百度一下，很详细），控制台里报错“‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件...image.png 原因：随机自己新建一个vue项目（https://segmentfault.com/a/1190000009871504），发现没有报错，于是可以肯定是svn下来的项目代码有问题...，解决办法：最后将项目里的“node_modules”文件夹删除，然后在cmd中cd到项目目录，依次运行命令：npm install和npm run build，最后运行npm run dev后项目成功运行

2.7K2 0

TypeScript的编译与运行

前言我们上篇内容讲TS需要的库以及依赖插件都安装好了，我们今天把剩下的部分介绍一下。通过本篇内容的介绍，你讲学会如果编译与运行自己的项目。...，需要在文件后加入哈希，这样多次构筑后就好产生很多没用的文件，而这个插件正好可以自动帮我们清空这些没用的文件。...安装方法如下 npm i webpack-merge -D 根据参数中的mode决定将哪个配置文件和baseconfig合并。至此，webpack的配置就完成了。...; document.querySelectorAll(".app")[0].innerHTML = str1; 我重新运行了一下之前的tsc命令，然后重新启动服务可以看到一下画面我们在编写一个生产环境的构造命令...总结今天我们将上一篇的内容没有说完的地方补充了一下，并通过编译命令成功的运行和编译完成了我们的第一个示例代码。好了今天的内容就是这些了，我是Tango一个热爱分享技术的程序猿我们下期见。

2530 0

【Vue】webpack的基本使用

3、require是运行运行时加载模块里的所有方法（动态加载）， import 是编译的时候调用（静态加载），不管在哪里引用都会提升到代码顶部。...会生成一个编译后的文件夹将main.js文件导入index.html.，不用导入index.js。...注意：webpack-dev-server会启动一个实时打包的http服务器。这样当我们每次修改index.js文件时，保存后就会自动打包，摁两次ctrl+c就可以终止运行。...文件名跟你前面设置的打包文件名一样，虽然看不到这个文件但是可以进行访问，我们需要把页面引入链接从 new.js改成新生成的保存到内存中的new.js，完成这两个步骤就可以真正的实现自动打包并实时演示了。...生成的html文件里会自动导入同时打包的js文件 devServer节点在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server

6481 0

彻底搞懂并实现 webpack 热更新原理

其实任何一个不管多复杂的事物都是由更小更简单的东西组成，剖开它认识它爱上它。配置HMR 接下来配置并感受一下热更新带来的便捷开发 webpack.config.js配置 // ......使用express启动本地服务，当浏览器访问资源时对此做响应。服务端和客户端使用websocket实现长连接 webpack监听源文件的变化，即当开发者保存文件时触发webpack的重新编译。...每次编译都会生成hash值、已改动模块的json文件、已改动模块代码的js文件编译完成后通过socket向客户端推送当前编译的hash戳客户端的websocket监听到有文件改动推送过来的hash戳...服务器，源代码地址@webpack-dev-server/SockJSServer.js#L34 服务端简易实现上面是我通过debug得出dev-server运行流程比较核心的几个点，下面将其抽象整合到一个文件中...，webpack重新编译时，向客户端推送hash和ok两个事件服务端调试阶段感兴趣的可以根据上面debug服务端源码所带的源码位置，并在浏览器的调试模式下设置断点查看每个阶段的值。

2.8K1 0

入门webpack的最佳实践（基于webpack4.X 5.X）--基础篇

Chunk 代码库: 一个chunk由十多个相关联模块组合而成，当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，是打包过程的中间产物...bundle webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。...基础配置首先，我们来创建一个空项目,运行 npm init npm install -D webpack webpack-cli 然后新建一个webpack.config.js文件，来编写我们的webpack...配置接下来，准备编写loader的配置，来支持编写其他类型的文件，首先，我们在webpack.config.js中加入用于编写loader的模块，其中，rules就是放置loader的数组。...css-loader的作用是识别css文件中的@import语句，以及url链接等，并将css文件中的样式编译为js模块，并导出，而style-loader的作用就是将导出的样式模块以style标签的方式插入

4164 0

搞懂webpack热更新原理

其实任何一个不管多复杂的事物都是由更小更简单的东西组成，剖开它认识它爱上它。配置HMR 接下来配置并感受一下热更新带来的便捷开发 webpack.config.js配置 // ......使用express启动本地服务，当浏览器访问资源时对此做响应。服务端和客户端使用websocket实现长连接 webpack监听源文件的变化，即当开发者保存文件时触发webpack的重新编译。...每次编译都会生成hash值、已改动模块的json文件、已改动模块代码的js文件编译完成后通过socket向客户端推送当前编译的hash戳客户端的websocket监听到有文件改动推送过来的hash戳...服务器，源代码地址@webpack-dev-server/SockJSServer.js#L34 服务端简易实现上面是我通过debug得出dev-server运行流程比较核心的几个点，下面将其抽象整合到一个文件中...，webpack重新编译时，向客户端推送hash和ok两个事件服务端调试阶段感兴趣的可以根据上面debug服务端源码所带的源码位置，并在浏览器的调试模式下设置断点查看每个阶段的值。

1K1 0

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

"webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.3" } 编写配置文件 //...--config webpack.dev.js --open" }, npm run dev 运行图片我们看到文件已经打包完成了，但是在dist目录里并没有看到文件，这是因为WDS是把编译好的文件放在缓存中...热更新原理第一步，在 webpack 的 watch 模式下，文件系统中某一个文件发生修改，webpack 监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码通过简单的 JavaScript...将webpack的编译编译打包的各个阶段告诉浏览器端。...将webpack的编译编译打包的各个阶段告诉浏览器端。思考：以及新产生的两个文件又是干嘛的？

8402 0

TypeScript入门教程（一）

什么是TypeScript 登录TypeScript官网，TypeScript是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法，本质上是添加了可选的静态类型和基于类的面向对象编程...TypeScript可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。...另外，tsc还可以支持一次编译多个文件，或者编译文件夹下的所有文件：一次编译多个文件： tsc 文件1 文件2 编译文件夹下所有ts文件： tsc *.ts 还可以监听文件的变化，使用--watch：...4.2 安装配置webpack 首先要安装webpack： npm install –save-dev webpack webpack-dev-server 这里一起安装了webpack-dev-server...source-map-loader 使用 TypeScript 输出的 sourcemap 文件来告诉 webpack 何时生成自己的 sourcemaps，这就允许你在调试最终生成的文件时就好像在调试

5.6K55 0

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

^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.3" }编写配置文件// webpack.dev.js'use...--config webpack.dev.js --open" },npm run dev 运行图片我们看到文件已经打包完成了，但是在dist目录里并没有看到文件，这是因为WDS是把编译好的文件放在缓存中...热更新原理第一步，在 webpack 的 watch 模式下，文件系统中某一个文件发生修改，webpack 监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码通过简单的 JavaScript...将webpack的编译编译打包的各个阶段告诉浏览器端。...将webpack的编译编译打包的各个阶段告诉浏览器端。思考：以及新产生的两个文件又是干嘛的？

9870 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭