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

最新推荐文章于 2024-05-25 09:32:52 发布
最新推荐文章于 2024-05-25 09:32:52 发布
阅读量798 收藏
点赞数
分类专栏： 前端构建 文章标签： 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成功了。

npm run dev运行时报错出现foms-client@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webp
qq_46687516的博客
04-30 1620
原因：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 这是新版webpack存在的BUG，卸载现有的新版本webpack，装老版本就好,但是也不能装太老的版本 办法： 我们看到 webpack-cli 的版本是 4.2.0，而 webpack-cli 从4.x.x开始就没有该目录， 所以我们保证webpack-cli 和 webpack-dev-server 的版本只要都是 3.x.x 就...
前端构建工具Grunt&Gulp&webpack笔记
LiuKairui的博客
01-17 765
包含了前端主要构建工具,主讲:尚硅谷{'张晓飞','熊键'},视频来自B站:{'BV18s411E7gQ', 'BV18s411E7T5', 'BV1e7411j7T5'}
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
探秘高效开发利器：Grunt Webpack 插件
最新发布
gitblog_00036的博客
05-25 434
探秘高效开发利器：Grunt Webpack 插件 grunt-webpackintegrate webpack into grunt build process项目地址:https://gitcode.com/gh_mirrors/gr/grunt-webpack 项目简介 在现代前端开发中，构建工具扮演着至关重要的角色。Grunt Webpack 是一个将流行的模块打包器 Webpack 集...
Grunt、webpack个人笔记
小白努力走
09-15 4221
主干：package.json Gruntfile package.json用来存储npm模块的依赖项 Gruntfile一般干两件事情： 1. 读取package信息 2. 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面） Gruntfile可压缩(uglify)，合并(concat)，监测(watch)，等 grunt.initConfig设置几个任务就下载对应
前端团队 Gulp & Webpack 工作流 迁移记
weixin_34342992的博客
06-14 178
折腾 从 2015 到现在，短短的三年内，几乎每年折腾一下工作流的 “ 更新换代 ”。从最早开始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，再到 Webpack@2.x ...... 在这个前端工具变化如此之快的浪潮里，在前端团队中，并发合作开发多个项目，前后端分离等等情况下，配置 或者 升级 或者 迁移 ...
使用webpack+axios修改ProxyTable错误之504
weixin_39720394的博客
05-25 5282
作为一名前端小白，这是我第一次写博客，有点慌，怕被大佬们笑话写的都东西太低级。此博客只为记录我自己遇到的低级坑，有什么不好的请大佬们多多指教。问题：做vue项目时，修改ProxyTable的target时，出现504错误。代码如下：proxyTable: { '/api':{ target: 'http://localhost:8080', pathRewrite: { ...
webpack-hmr-3-ways：设置Webpack热模块替换的三种方法：webpack-dev-server CLI，webpack-dev-server API以及使用webpack-hot-middleware进行表达
02-05
从最简单到最复杂： 使用 使用 使用 这是有关如何选择您要使用的方法的简短讨论。 如果您想要最简单的设置，请使用 。 如果您正在使用grunt或类的任务运行程序，则需要使用 。 或类似地，如果您有自己的节点...
前端开源库-grunt-cmd-transport-wnd
08-29
`grunt-cmd-transport-wnd` 是一个专门用于前端构建的开源库，它基于 Grunt，一个强大的JavaScript任务运行器，旨在帮助开发者自动化执行各种重复性工作，如编译、测试、清理和部署等。`grunt-cmd-transport-wnd` 的...
grunt构建项目打包上传
起风了
09-17 1105
全局安装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-...
前端设置proxy代理504报错
chenlincc的博客
12-24 6028
在与后端本地联调时，后端给了一个他的ip地址和端口，设置如下代理后报504 终端提示 Error occured while trying to proxy to : xxxx proxy:{ '/api':{ targer:'10.100.100.100:9084', changeOrign:true } } 原因是没设置请求协议所导致，加上即可。 proxy:{ '/api':{ targer:'http://10.100.100.100
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目录下的文件来处理网络请求。他会监听资源文件，当他们
解决执行grunt命令报错【Cannot find module 'coffeescript/register'】
weixin_44778202的博客
06-27 1073
在使用grunt的插件执行grunt命令时报错： 如图： 报错信息：Cannot find module 'coffeescript/register' 解决办法： 1：删除项目中的 node_modules包 这里面安装的是一些插件以及项目中的grunt文件； 2：重新在项目中安装grunt（为了安装各种插件）； 3：重新安装要使用的插件； 4：cmd中运行grunt命令即可； 转载自：ht...
一些印象深刻的坑小结
dc1339485的博客
12-31 196
年底了最近也比较忙没怎么有时间来写博客，今晚找个时间回想一下遇到的一些令人深刻的坑，并写上解决方案；希望能帮到更多的人填坑。 1.webpack配置devServerproxy前后端分离接口返回504的问题 问题描述：配置webpackdevServer proxy后端接口的时候，前面几个接口能正常访问，后面配置的接口居然504；按理说这些配置要错就全错，怎么有的可以访问有的不可...
webpack4.0基础配置以及（webpack-dev-server）的使用
yezi__6的博客
05-11 5622
今天又开启了我webpack4.0的学习旅途。上次学习webpack中途问题实在是解决不了，就搁置好久没看了。可是怎么能不看呢，毕竟自己准备进军前端一线了。哈哈~~~ 说下webpack都可以干什么吧？ 代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布等特点 好了不说啦开始基本配置吧 在开始配置之前，先新建一个文件夹webpc，在根目录下写src(js, css,....
webpack dev server快速上手
Super红领巾
10-04 252
webpack dev server 一个webpack官方服务器 webpack dev server能够做什么? live reloading 触发浏览器自动刷新，当项目文件发生改变会被识别 路径重定向 支持https 支持在浏览器显示实时编译错误 接口代理（本地开发环境请求集成、测试环境接口） 模块热更新 常见配置 官方配置入口 devServer inline false会开启...
webpack-dev-server配合nginx启动时遇到热替换模块请求跨域
weixin_34365635的博客
06-17 812
当本地URL已经用Nginx代理，例如http://vue-native.guahao-inc.... 代理到http://vue-native.guahao-inc.com不带端口号时，本地的webpack-dev-server会遇到请求热更新的json文件跨域的问题，如下图： 费了很大的劲网上找来找去都找不到好的解决办法。 突然想到...
使用 webpack-dev-server 搭建开发环境(推荐)
小白小白从不日别的博客
07-04 554
在一定程度上可以减少工作量，提升工作效率 不会生成类似于dist的文件夹 在修改后也不用再次运行 npm run webpack，而是直接修改后，便可看到相应的效果】 前提：在项目的根目录下 1.通过npminstall初始化项目，安装相关包 2.通过npminstall--save-devwebpack-dev-server@3.11.0安装 https://www.webpackjs.com/configuration/dev-server/ 3.通过npm...
简化构建流程：grunt-recursively-load-tasks让你轻松递归加载任务
虽然grunt-recursively-load-tasks插件针对的是Grunt构建工具，但在实际开发中，也存在其他的构建工具，如Gulp和Webpack等。每种构建工具都有其特点和适用场景，开发者可以根据项目需求和个人喜好选择合适的工具。而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值