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. Vue深度学习（1）

    Hello World 现在就让我们来写第一个vue.js的实例.如下代码: html代码: <div id="demo"> {{ message }} </di ...

  2. Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  3. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  4. Linux：快速找到占用CPU过高的Thread

    1.通过top命令找到高耗CPU的进程,记下PID 2.使用命令ps -mp PID -o THREAD,tid,time找到高耗CPU的那些线程 3.jstack PID 4.对每个高耗CPU的线程 ...

  5. awk 字符拼接

    i-6gdkkemx 2 2 #cat cpu.txt | awk '{print $1,$2"核"$3"G"}' i-6gdkkemx 2核2G

  6. oracle初级（续）

    有志者.事竟成,破釜沉舟,百二秦关终属楚: 苦心人.天不负,卧薪尝胆,三千越甲可吞吴. oracle基本简单的用法,之前的笔记稍作整理一下,希望对各位有用,如有问题可在下方留言,所有SQL都是经过or ...

  7. open-falcon(v0.2)部署手册（源码编译）

    今天安装falcon-plus,下面为用基础环境配置. centos 6.8  alisql5.6.32   redis-3.2.8 cmake-3.9.1 bison-3.0 openssl-1.0 ...

  8. python爬去电影天堂恐怖片+游戏

    1.爬去方式python+selenium 2.工作流程 selenium自动输入,自动爬取,建立文件夹,存入磁力链接到记事本 3.贴上代码 #!/usr/bin/Python# -*- coding ...

  9. KVM（一）：KVM安装

    KVM通俗的说就是一台服务器当多台用,详细介绍去百度和谷歌. 首先查看服务器是否支持虚拟化 [root@KVM ~]# grep -E '(vmx|svm)' /proc/cpuinfo --colo ...

  10. for 在项目实战中用的比较多

    for循环编程语言中的语句之一,用于循环执行.for循环是开界的,它的一般形式为: for(; <条件表达式>; ) 语句: 初始化通常是一个赋值语句, 它用来给循环控制变量赋初值: 条件 ...