webpack 项目使用webpack-dev-server 自动编译 （2）
在上一篇的博客中我们使用webpack 创建了一个项目
创建webpack 项目（1） https://blog.csdn.net/datouniao1/article/details/119426913
我们继续上节课的内容，在我们创建的webpack项目中,使用webpack-dev-server
webpack-dev-server 类似于tomcat 能实现将webpack 部署，通过localhost:xxxx的方式打开
在开发项目中能够实现实时的编译项目，将我们修改的代码立即的呈现
1.安装webpack-dev-server
cnpm i webpack-dev-server -g
2.项目package.json中配置webpack-dev-server
3. 运行项目
npm run dev
在运行的时候出现了报错，在网上随便的百度一下，我们知道是webpack-dev-server 版本和webpack-cli的版本不兼容的，这里我们降低webpack-cli的版本
卸载原来的webpack-cli
安装新的webpack-cli
cnpm i webpack-cli@3.3.12 -D
重新运行：
npm run dev
访问项目：
上面我们使用webpack-dev-server 将项目启动了，如果我们想要修改端口怎么办
我们在在package.json 中增加如下的配置：
重新运行：
上面我们使用webpack-dec-server 运行了项目
现在我们看如果修改了代码，页面上会不会自动的编译
希望对你有所帮助
webpack 项目使用webpack-dev-server 自动编译 （2）相关推荐
- git 创建webpack项目_从 0 开始构建 webpack 项目【Webpack Book 翻译】
在开始之前,请确保你使用的是 Node 的最新版本.至少是最新的 LTS(长期支持)版本,本书的配置基于 LTS 版本所写,你的终端需要有 node 和 npm 命令,Yarn 也是一个不错的选择,也 ...
- webpack学习之2.自动编译、实时重载LiveReload、热替换HMR
代码沿用webpack学习之1.基础配置 每次要编译代码时,手动运行 npm run build 就会变得很麻烦. webpack 中有几个不同的方式,可以在代码发生变化后自动编译代码: webpac ...
- SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）
SkeyeWebPlayer.js H5播放器开发之播放器动态渲染video. 动态渲染是采用js进行创建dom.添加dom.添加class.style等方式操作dom元素.最终将播放器编译成成一个独 ...
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require('axios') co ...
- Koa2仿知乎服务端项目：Webpack配置
项目简介 该项目为一个后端项目,该项目仿"知乎",模拟实现了: JWT用户认证.授权模块 上传图片模块 个人资料模块 关注与粉丝模块 话题模块 问题模块 答案模块 评论模块 共计4 ...
- 从零搭建react + webpack项目
初始化项目 mkdir my-react cd my-react npm init 安装 webpack npm install webpack webpack-cli --save-dev 最简单的 ...
- 分析vue-cli@2.9.3 搭建的webpack项目工程
前言 已经有很多分析Vue-cli搭建工程的文章,为什么自己还要写一遍呢.学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景.你不一定能看到别人看到的风景,体会到别人的心情.只有自己去登山 ...
- vue(vue-cli+vue-router)+babel+webpack项目搭建入门 （第二步）
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<二> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
- vue-cli@2.9.3 搭建的webpack项目工程
前言 已经有很多分析 Vue-cli搭建工程的文章,为什么自己还要写一遍呢.学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景.你不一定能看到别人看到的风景,体会到别人的心情.只有自己去登 ...
最新文章
- 微会动微信现场互动：2019年会展和活动产业的发展趋势
- NYOJ 127 星际之门(一)
- 好看的按钮组件_这个发光的外骨骼盔甲是什么？为什么它如此好看！
- Go大型项目实战：项目结构、配置管理、API设计
- call() , apply() ,bind()的用法
- Muse-UI +Vue2.0框架开发环境搭建
- idea maven丢失
- 数据库建立索引的优缺点及适合建立索引的字段
- 单条视频播放超7000万，网红界“大油田”如何掀起快手流量浪潮？
- Tensorlow 中文API：tf.zeros() tf.ones(）tf.fill(）tf.constant(）
- 四步快速配置一个简单高效的文本生成图像基准模型 T2I baseline
- oracle计算本月天数,oracle中计算某月的天数
- 【已解决】CSDN无法粘贴图片、截图 或者 上传图片一直显示失败
- 接口请求报错 504 Gateway Time-out
- C++ std::string::find()函数（在字符串中查找内容）
- 计算机网络——应用层之文件传送协议（FTP）
- SpringBoot（读取配值文件里面的属性）
- c语言多变量输入,技多不压身——C语言（五）变量，常量和输入输出
- Vercel+Freenom 搭建博客
- 美国洛杉矶某曾经知名品牌一型号单反数码相机辐射整改案例