前端构建工具从grunt转webpack-dev-server遇到的问题（win7）

最新推荐文章于 2022-05-03 13:05:44 发布
最新推荐文章于 2022-05-03 13:05:44 发布
阅读量784 收藏
点赞数
分类专栏： 前端构建 文章标签： node gyp webpack-dev-server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JaneZ3/article/details/48542145
版权

一开始前端构建工具用的是grunt，因为和mvn jetty结合使用，所以启动grunt serve后不想要自动在浏览器打开网页的效果。

改为webpack-dev-server后，启动方式：npm run dev,报错：webpack-dev-server不是命令。

说明webpack-dev-server没有安装成功。执行npm i webpack-dev-server,在安装node gyp的地方卡住，一直不往下执行。

翻墙google的结果，node gyp依赖于系统的.net framework、Microsoft Visual C++。Microsoft Visual C++原来版本是2005，升级到2013后，终于npm install成功了。

JaneZ3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
grunt-webpack：将webpack集成到grunt构建过程中
02-06
咕WebWebpack 将Webpack与Grunt一起使用。 要求 grunt-webpack版本4支持webpack 4以及版本5 beta。 如果需要，请使用webpack-dev-server 3.2.0版本（可选）。 安装 在项目的旁边安装此grunt插件。 您还需要自己安装webpack，此grunt插件不会自行安装webpack。 yarn add webpack grunt-webpack --dev // or // npm i webpack grunt-webpack --save-dev 如果您还想使用webpack-dev-server任务，则还需要安装web
react-webpack-HMR-middleware:通过webpack-dev-middleware和webpack-hot-middleware对热模块重新加载做出React
05-07
如果想要使用a task runner类似于grunt 或 gulp, 选择 webpack-dev-server API.如果想要使用你自己的node脚本来运行webpack, 选择 webpack-dev-server API.已经使用express或别的框架了, 选择 webpack-hot-...
前端团队 Gulp & Webpack 工作流 迁移记
weixin_34342992的博客
06-14 164
折腾 从 2015 到现在，短短的三年内，几乎每年折腾一下工作流的 “ 更新换代 ”。从最早开始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，再到 Webpack@2.x ...... 在这个前端工具变化如此之快的浪潮里，在前端团队中，并发合作开发多个项目，前后端分离等等情况下，配置 或者 升级 或者 迁移 ...
webpack-dev-server
瓜皮伦的博客
05-03 5256
开发服务器 在开发阶段，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程： 编写代码 控制台运行命令完成打包 打开页面查看效果 继续编写代码，回到步骤2 并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境 为了解决这些问题，webpack官方制作了一个单独的库：webpack-dev-server 它既不是plugin也不是loader 先来看看它怎么用 安装 执行webpack-dev-server命令 webpack-dev-server命令几乎支持所有的
Grunt、webpack个人笔记
小白努力走
09-15 4172
主干：package.json Gruntfile package.json用来存储npm模块的依赖项 Gruntfile一般干两件事情： 1. 读取package信息 2. 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面） Gruntfile可压缩(uglify)，合并(concat)，监测(watch)，等 grunt.initConfig设置几个任务就下载对应
504 Gateway Time-out原因及解决方法
ityw520的博客
10-13 1万+
1, 今天在webpack通过proxy开发的时候，接口时正常的，但是上到测试机，通过nginx转发的时候，就会出现504 Gatway time-out 思路 1， 初步判断时nginx的转发写的有问题，但是看了下也没什么问题 2，查找errlog，也没什么具体错误提示， 3，查了下，觉得可能nginx的设置的时间太短，于是设置了十分钟，还是time-out4，判断可能nginx服务器和转发的服务器，不能通信，ping了一下，果然是这样 ...
webpack-hmr-3-ways：设置Webpack热模块替换的三种方法：webpack-dev-server CLI，webpack-dev-server API以及使用webpack-hot-middleware进行表达
02-05
从最简单到最复杂： 使用 使用 使用 这是有关如何选择您要使用的方法的简短讨论。 如果您想要最简单的设置，请使用 。 如果您正在使用grunt或类的任务运行程序，则需要使用 。 或类似地，如果您有自己的节点...
grunt-dev-update：使用grunt任务自动更新package.json软件包
02-03
熟悉该过程后，可以使用以下命令安装此插件： npm install --save-dev grunt-dev-update 插件安装完成后，可以使用以下JavaScript代码在您的Gruntfile中启用它： grunt . loadNpmTasks ( 'grunt-dev-update' ) ; ...
grunt-gulp-webpack-npm
05-01
Grunt Gulp Webpack和Npm以及何时使用什么我们将涵盖... Webpack旨在捆绑JavaScript，以便您可以构建复杂JavaScript项目并将代码从一个文件加载到另一个文件中。 Webpack可以扩展做几件事，但是所有这些都与您捆绑JavaS
webpack 代理报504
weixin_39818813的博客
12-01 920
重新运行项目就可以了
gruntServer:这是用于设置项目和本地 grunt 服务器的基本文件
06-12
服务器 Grunt Server 项目用于创建用于 Web 应用程序开发的便携式 Web 服务器 如何设置： 在你的系统上安装 Node / npm 将此存储库克隆到您选择的任何目录中……出于说明目的，我们将其称为“gruntServer”。 在终端中导航到 gruntServer 目录并运行“npm install” 在 gruntServer 目录中创建一个“src”文件夹以包含您的开发站点文件示例：index.html 在 gruntServer 目录的终端中运行命令“grunt server” 完成：您现在应该能够在任何浏览器中导航到 localhost 并查看现在从 gruntServer/src/{index.html} 托管的站点 端口 80 的故障排除可能已被 apache 或其他 Web 服务的实例占用。 您可以执行以下操作来解决此问题。 停止使用 80 端
grunt构建项目打包上传
起风了
09-17 1058
全局安装grunt： npm install -g grunt-cli 生成package.json文件： npm init 安装grunt和所需要的插件： npm install grunt –save-dev npm install –save-dev grunt-contrib-concat grunt-contrib-jshint grunt-...
前端模块化开发篇之grunt&webpack篇
weixin_30673611的博客
03-05 145
　　几个月前写了一篇有关gulp和browserify来做前端构建的博客，因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候)，所以这里再强烈推荐一款js打包工具-webpack。webpack很强大，不光可以模块化加载js,甚至还有jsx,css,图片等等。可以看看webpack托管到github的官网，相信你看一眼就能懂webpack的强大之处了。进入webpa...
记一次接口504 Gateway Time-out原因及解决方法
wangchaoqi1985的博客
09-06 3207
记一次接口504 Gateway Time-out原因及解决方法
使用webpack+axios修改ProxyTable错误之504
weixin_39720394的博客
05-25 5217
作为一名前端小白，这是我第一次写博客，有点慌，怕被大佬们笑话写的都东西太低级。此博客只为记录我自己遇到的低级坑，有什么不好的请大佬们多多指教。问题：做vue项目时，修改ProxyTable的target时，出现504错误。代码如下：proxyTable: { '/api':{ target: 'http://localhost:8080', pathRewrite: { ...
vue.js 配置webpack-dev-server 的错误解决方法
lhb_11的博客
05-09 4万+
webpack进阶之loader篇解决如下：源webpack.config.js中如下： devServer: { historyApiFallback: true, hot: true, inline: true, progress:true },
web开发工具 http-server , grunt 使用
阿修罗道
03-07 2万+
简述两个web开发常用的工具：http-server 和 grunt 的使用方法。
webpack-dev-server简单使用
热门推荐
高山上的鱼
02-09 5万+
1.webpack-dev-server配置1.1 ContentBasewebpack-dev-server会使用当前的路径作为请求的资源路径，但是你可以通过指定content base来修改这个默认行为:$ webpack-dev-server --content-base build/这样webpack-dev-server就会使用build目录下的文件来处理网络请求。他会监听资源文件，当他们
前端开发利器：Bower与Grunt自动化构建
内容还包括Grunt的任务配置、文件操作，如grunt-contrib-clean、grunt-contrib-copy、grunt-contrib-watch等。最后，资料还提到了代码合并、压缩、HTML和CSS优化以及服务器启动相关的Grunt插件，如grunt-contrib-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值