webpack构建本地服务器

想不想让你的浏览器监测你的代码的修改，并自动刷新修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，

可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖

1、安装webpack-dev-server模块

　　npm install --save-dev webpack-dev-server

2、如何配置webpack-dev-server

　　A、devserver作为webpack配置选项中的一项，具有以下配置选项

devserver配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port 设置默认监听端口，如果省略，默认为”8080“
inline 设置为true，当源文件改变时会自动刷新页面
colors 设置为true，使终端输出的文件为彩色的
historyApiFallback 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

作者：zhangwang
链接：http://www.jianshu.com/p/42e11515c10f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 
 
　　B、继续把这些命令加到webpack的配置文件中，现在的配置文件如下所示（webpack.config.js）

 
 
 
 

webpack构建本地服务器的更多相关文章

  1. 使用webpack构建本地服务器

    想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件 ...

  2. webpack开启本地服务器与热更新

    第一个webpack本地服务 webpack本地服务相关的一些操作指令与应用 一.第一个webpack本地服务 //工作区间 src//文件夹 index.js//入口文件 index.css//测试 ...

  3. [转]webpack配置本地服务器

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  4. webpack 之搭建本地服务器

    搭建本地服务器 webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现 我们想要的让浏览器自动刷新显示我们修改后的结果 不过它是一个单 ...

  5. webpack（10）webpack-dev-server搭建本地服务器

    前言 当我们使用webpack打包时,发现每次更新了一点代码,都需要重新打包,这样很麻烦,我们希望本地能搭建一个服务器,然后写入新的代码能够自动检测出来,这时候就需要用到webpack-dev-ser ...

  6. Jenkins构建本地项目到服务器上自动部署的方法

    博主原创,转载请注明. 最近在用Jenkins做项目的自动部署,由于项目需求,现在要在本地构建后再放到Tomcat里.以下是本地构建步骤: 名称填写好,下面的选项是可选的. 源码管理这里选择none. ...

  7. webpack构建vue项目（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  8. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

  9. webpack构建具备版本管理能力的项目

    webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...

随机推荐

  1. F12调试模式下使用console自动提交

    F12调试模式下使用console自动提交(F12 的console->输入代码->按enter即可运行) 1.使用定时器setInterval进行自动提交 //方法中可使用jquery调 ...

  2. D02 TED Elon Mulsk The future we're building — and boring

    摘要:精选TED. 每个音频不超过2分钟,学英语和吸收伟大思想两不误 音频: https://n1audio.hjfile.cn/st/de745862-d5f4-4ef4-9218-d79361ca ...

  3. （转）rabbitMQ基础知识及命令语句

    摘要: 整理rabbitmq的用户管理相关知识,备忘 安装最新版本的rabbitmq(3.3.1),并启用management plugin后,使用默认的账号guest登陆管理控制台,却提示登陆失败. ...

  4. 0基础手把手教你搭建webpack运行打包项目（未完待续）

    这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...

  5. 【HTML5】增强的表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. iOS SDAutoLayout图文混排-共享

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #526eda } span.s1 { color: #4dbf5 ...

  7. vbs的一些入门基础。。。

    VBS(VBScript的进一步简写)是基于Visual Basic的脚本语言. Microsoft Visual Basic是微软公司出品的一套可视化编程工具, 语法基于Basic. 脚本语言, 就 ...

  8. Python3 实现数据读写分离设计

    前言 首先读写分离可以保证数据库的稳定,简单的说就是当网站访问量大时,读写都在一个库,很有可能会出现脏数据的情况,如果采取阻塞似操作,那么用户体验就会变得更差. 而且目前大多数网站的读写是失衡的,以淘 ...

  9. Python核心编程--浅拷贝与深拷贝

    一.问题引出浅拷贝 首先看下面代码的执行情况: a = [1, 2, 3] print('a = %s' % a) # a = [1, 2, 3] b = a print('b = %s' % b) ...

  10. Q：javax.comm 2.0 windows下Eclipse的配置

    @转自http://blog.csdn.net/zhuanghe_xing/article/details/7523744处 要在Windows下,对计算机的串口或并口等进行编程,可以选择使用Java ...