前提：1、对webpack有一定了解，本文不做介绍

　　　 2、安装node.js

手把手操作：

1、创建一个名为webpack-server的文件夹（随便取的）

2、cd到当前文件夹：cd webpack-server，有个快捷方法，打开文件夹，按住shift键，点鼠标右键，选择在“在此处打开命令窗口(w)”

3、打开命令行后，输入npm init 命令创建package.json文件

接下来一步一步填，一直enter不填直接跳过也行

yes后就会生成一个package.json文件。

{

  "name": "webpack-server",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

4、在webpack-server文件夹下创建app文件夹，并在该文件夹下面创建index.html和main.js，同时创建一个webpack打包的配置文件webpack.config.js

此时文件目录如下：

三个文件代码是这样的

index.html

<html>

  <body>

    <script type="text/javascript" src="bundle.js"></script>

  </body>

</html>

main.js

document.write('<h1>Hello World!!!</h1>');

webpack.config.js

module.exports = {

  devtool: 'eval-source-map',

  entry: './main.js',

  output: {

    filename: 'bundle.js'

  }

};

以上是一些打包的简单代码，在页面中输出Hello World!!!

5、安装webpack，作为依赖包。

指令：npm install --save-dev webpack

（提示：安装淘宝镜像会更快下载，方法见链接https://npm.taobao.org/，安装了之后，指令就是cnpm install --save-dev webpack）

安装完成，webpack-server会生成一个node_modules的文件夹，同时，package.json依赖包增加webpack

6、安装webpack-dev-server，指令：npm install --save-dev webpack-dev-server，（淘宝镜像下是cnpm install --save-dev webpack-dev-server）

安装完后又多了一个依赖包

7、安装完后就可以关掉该命令行窗口了，然后进入app文件夹，在app文件夹下面打开命令行窗口，并执行webpack-dev-server命令

ok，看到这就表示成功了，你就可以打开http://localhost:8080/打开页面了。（注：默认为8080端口，可以修改的）

8、简单修改下代码：

画面自动变成：

——————————————————————————————分割线————————————————————————————————

webpack-dev-server有以下可选参数：

--content-base //设定webpack-dev-server的director根目录。如果不进行设定的话，默认是在当前目录下。
--quiet: //控制台中不输出打包的信息，开发中一般设置为false，进行 打印，这样查看错误比较方面
--no-info: // 不显示任何信息
--colors: //对信息进行颜色输出
--no-colors: //对信息不进行颜色输出
--compress: //开启gzip压缩
--host <hostname/ip>: //设置ip
--port <number>: //设置端口号，默认是:8080
--inline: //webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,
--hot: //开发热替换
--open: //启动命令，自动打开浏览器
--history-api-fallback: //查看历史url

上面的参数都是可选的，举个改变端口的例子：

指令：webpack-dev-server --port 8088

显示出来的是：

以上就是我所分享的内容，纯属原创，欢迎阅读与转载，请注明出处！

webpack搭建服务器，随时修改刷新的更多相关文章

  1. node + express 搭建服务器，修改为自动重启服务器

    1.使用express搭建一个项目,步骤如下(安装node步骤已省略) a.全局安装express-generator和express npm i express-generator -g npm i ...

  2. 搭建一个webpack微服务器

    [前言]:因为最近在vue2.0的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包,而没有把它纳入到项目开发的“主体过程”中来 ...

  3. webpack 搭建React（手动搭建）

    前言 最近真的都是在瞎学,看到自己不是很明白的东西,都喜欢自己手动去敲1到3遍(晚上下班的时候咯), 瞧,React  基于webpack 搭建,react 官方有一套手脚架工具,我自己也搭建过确实挺 ...

  4. 26、前端知识点--利用webpack搭建脚手架一套完整流程

    前言 我们的目标是利用webpack搭建一个基于react + react-router +dva + es6 + less + antd用于中后台开发的脚手架,同学们可能会说社区里那么多优秀的脚手架 ...

  5. nginx+tomcat+memcached搭建服务器集群及负载均衡

    在实际项目中,由于用户的访问量很大的原因,往往需要同时开启多个服务器才能满足实际需求.但是同时开启多个服务又该怎么管理他们呢?怎样实现session共享呢?下面就来讲一讲如何使用tomcat+ngin ...

  6. webpack搭建自己的项目

    使用代理的方式参考地址:http://www.cnblogs.com/wangyongcun/p/7665687.html npm 常用模块 npm init 创建package.json文件 一值回 ...

  7. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

  8. TypeScript(二)使用Webpack搭建环境

    今天继续来更新,本篇文章我们讲环境搭建,主要分享一些环境搭建的学习资源及安装步骤,解决一些安装时可能会出现的问题.下面就让我们一起进入学习第一步,搭建TypeScript环境:一. 环境搭建1.1. ...

  9. 教你使用Webpack搭建环境 TypeScript （2）

      一. 环境搭建1.1. TypeScript环境安装已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git在上一个章节中我们说过,T ...

随机推荐

  1. C语言在open() FIFO文件的时候卡住了

    需要注意的是,open打开FIFO文件的时候,open函数里的flag参数 O——NONBLOCK: 置位:  如果“只写”方式打开文件,写进程会阻塞直到有一个读进程来读这个FIFO管道.就是说:没有 ...

  2. asp.net mvc源码分析-Route的GetRouteData

    我知道Route这里东西应该算路由,这里把它放到mvc里面有些不怎么合适,但是我想大家多数遇到路由都是在mvc的时候吧.首先我们还是来看看GetRouteData方法吧 [csharp] public ...

  3. TypeScript设计模式之备忘录、命令

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  4. 数据库 t-sql 语句

    sql 高级语句  在基础语句上加上条件 条件修改: update 表名set 列明=要修改的值  where 列名 =原来的值 条件删除    删除  这个值的的一行 delete from 表名 ...

  5. Objective-C日记-之编码对象属性

    NSCoder类 1,概述 将对象的实例变量和其他数据编码为数据块,然后将他们存在到磁盘当中:以后将这些数据块读回到内存中,并且还基于保存的数据创建新的对象,也称序列化或反序列化. 2,用法 a,首先 ...

  6. Spring+SpringMVC+MyBatis+easyUI整合基础篇（九）版本控制

    日常啰嗦 还好在第一篇文章里就列好了接下来的主线及要写的知识点,不然都不知道要写什么东西了,开篇里已经列了基础篇要讲svn和git的知识点,所以这一篇就写一下版本控制. 项目实际效果展示在这里,账密: ...

  7. Android 一个改善的okHttp封装库

    膜拜一下~ 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49734867: 本文出自:[张鸿洋的博客] 一.概述 之前写了篇A ...

  8. SQL Server里书签查找的性能伤害

    在我的博客上,以前我经常谈到SQL Serverl里的书签查找,还有它们带来的很多问题.在今天的文章里,我想从性能角度进一步谈下书签查找,还有它们如何拉低你整个SQL Server性能. 书签查找—— ...

  9. Omi v1.0.2发布 - 正式支持传递javascript表达式

    原文地址:https://github.com/AlloyTeam/omi/ 写在前面 Omi框架可以通过在组件上声明 data-* 把属性传递给子节点. Omi从设计之初,就是往标准的DOM标签的标 ...

  10. cuda学习笔记——deviceQuery

    main(int argc, char **argv):argc是参数个数,**argv具体的参数,第0个是程序全名 cudaError_t类型:记录cuda错误,值为cudaSuccess则正确执行 ...