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. webAPP踩坑记录

    最近公司突然给我们下了一个任务  一个星期要做出一个系统网站 外加手机app   2个同事负责 web开发  我负责手机app 的开发 今天终于初级版本做完了,记录一下手机app踩过的坑与优化之路 用 ...

  2. 导入maven项目时出现 Version of Spring Facet could not be detected. 解决方法

    问题出现在: 导入maven项目的时候,其中,我的这个maven项目是由Spring,Struts2,Mybatis搭建的. 问题截图:  即Spring的版本不能被检测到.此时需要做的就是找到spr ...

  3. 【ANT】description元素和属性

    <?xml version="1.0" ?> <project default="test"> <description> ...

  4. 【python】input、int、if-else、注释、while、module(random.randint())语法示例

    import random luckyNum=random.randint(2,9) i=1 while i<=3: guessNum=input("请你猜猜我的幸运号码:" ...

  5. 网口做trunk

    首先发现这个服务器的两个网口对应的交换机端口 ailixin-asw2960>en ailixin-asw2960#terminal monitor 查看端口的状态 ailixin-asw296 ...

  6. ionic环境配置及问题

    ionic是什么? 其实就是一款用于开发web app的开源免费框架,和国产的MUI差不多. 官网:https://ionicframework.com/ 必备条件: 安装Node.js 安装Java ...

  7. Android Activity生命周期详细解析

    概况 讲Android Activity那怎么都绕不过这张图,这篇文章也是围绕这幅图详细分析. 背景 假设这是你的APP,以此为背景,下面的每个part请结合上图理解. #Case 1 当按下app启 ...

  8. 测试xss

    <script>window.onload=function(){ alert('加载完毕');}</script>

  9. ES6 函数的扩展1

    1. 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值. ES6允许为函数的参数设置默认值,即直接 ...

  10. python中的virtualenv是干嘛的？

    众所周知,python的各种库跨度比较大,比如如果你开发web的话,一个项目使用的Django是1.8, 而另一个项目使用的Django版本是1.7, 这就给开发人员带来了很大的困扰. 因此,pyth ...