三分钟使用webpack-dev-sever搭建一个服务器

webpack-dev-server是一个小型的Node.js Express服务器,我们可以通过它搭建一个本地服务器,并且实现文件热更新;

1.切换到你的目录下对项目进行初始化

npm init 

一顿enter,yes之后我们会得到package.json文件(ps:json不能写注释,别复制过去直接用奥!否则会报错)

{
  "name": "webpack_demo",  //项目名称
  "version": "1.0.0", //版本号
  "description": "", //描述
  "main": "index.js", //入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  }, //自定义命令(就是 npm run xxx之类的)
  "keywords": [],//关键词,便于用户搜索到我们的项目
  "author": "",//作者
  "license": "ISC" //开源许可证
}

2.安装webpack

npm install webpack --save-dev

敲黑板!!!

为什么使用--save-dev而不是--save?

--save 会把依赖包名称添加到 package.json 文件 dependencies 下;

--save-dev 则添加到 package.json 文件 devDependencies 键下;

示例:

{
 "dependencies": {
    "vue": "^2.2.1"
  },
  "devDependencies": {"vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

不过这只是它们的表面区别。它们真正的区别是,npm自己的文档说dependencies是运行时依赖,devDependencies是开发时的依赖。即devDependencies 下列出的模块,是我们开发时用的,比如 我们安装 js的压缩包gulp-uglify 时,我们采用的是 “npm install –save-dev gulp-uglify ”命令安装,因为我们在发布后用不到它,而只是在我们开发才用到它。dependencies 下的模块,则是我们发布后还需要依赖的模块,譬如像jQuery库或者Angular框架类似的,我们在开发完后后肯定还要依赖它们,否则就运行不了。

另外需要补充的是: 
正常使用npm install时,会下载dependencies和devDependencies中的模块,当使用npm install –production或者注明NODE_ENV变量值为production时,只会下载dependencies中的模块。

webpack安装成功后你的json文件是这样的

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --env development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

3.安装webpack-dev-server

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

安装成功之后你的可以看到依赖文件多出来一个

"devDependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }

安装到这里结束,接下来开始配置,

新建webpack.config.js用来配置webpack

新建build文件夹作为输入位置

新建src文件夹存放入口文件,

在src先创建index.js

var el = document.getElementById(‘app‘);
el.innerHTML = ‘我要改变你!‘;

创建assets文件夹作为指定资源文件引用的路径(要实现刷新这个很重要)

项目结构如下:

4.配置webpack.config.js

const path = require(‘path‘); //node的路径模块
module.exports = {
  entry: {
    app: ["./src/index.js"] //入口文件
  },
  output: {
    path: path.resolve(__dirname, "build"),//输出位置
    publicPath: "/assets/",//指定资源文件引用的目录
    filename: "bundle.js"//输入文件
  }
}

新建index.html引入asset/bundle.js,你在本地是看不到这个bundle.js的,它其实存在了内存中,想看编译后的代码可以去build下找

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p id="app">萨达撒多</p>
	<script type="text/javascript" src="assets/bundle.js"></script> 
</body> </html>

ok 其实现在我们可以运行webpack-dev-sever,他已经可以正常工作了,但是每次都这么敲命令很麻烦,所以为们在package.json里给他添加一个自定义命令

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --env development" //就是这句了 --env development的意思是开发者环境下
 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.10.0" }, "dependencies": { "webpack-dev-server": "^2.9.7" } }

命令添加完成,我们就可以通过npm run dev来运行项目了,用过vue-cli的同学,有没有很熟悉的感觉,哈哈

默认端口号是8080,也可是自己手动去修改端口号,怎么改就不说了超简单的,查一查网上有详细教程

这个时候就证明成功了,在网页上打开http://localhost:8080就可以看到页面了,

这个时候让我们修改一下index.js看看会发生什么

var el = document.getElementById(‘app‘);
el.innerHTML = ‘我被改变了!‘;

ctrl+s保存,切换回浏览器无需刷新,看一下页面的字是不是变了;

搞定,收工!

时间: 2024-09-29 09:26:30

三分钟使用webpack-dev-sever搭建一个服务器的相关文章

nodejs 简单的搭建一个服务器

前言: nodejs 主要是后台语言 模块 自定义 JavaScript 是前台语言 nodejs 是 也是使用我们的 JavaScript 语言,甚至他的引擎都是 chrome 的 v8 引擎,开源,所以学习 nodejs 对于我们前端来说,是一件极其友好的事情 后台的语言: php python Java nodejs 的优势 1. 性能 经过某个不专业的人士测试: nodejs 比 php 的 性能高 86倍 nodejs 运行 1s   php 要运行 一分半 就是写一个项目:php 

怎么在自己电脑上搭建一个服务器,以便于外网访问呢?

前几天我要测试一个项目,这个是需要往服务器上放才可以测的,但后台太忙了,所以就说让我自己在自己电脑搭建个服务器,把项目代码放在里面测就可以,其实搭建服务器的方法有很多,之前我有用过一个XMAPP的软件它也是可以作为服务器承载代码,以供别人访问,不过我觉得比较流行的还是Tomcat服务器: 其实我们偶尔也会写一下网页,javaweb程序,为了逼近现实,我们的项目发布后,都希望我们的项目能让更多的人看到,难道我们要自己去买域名么,买空间么?其实我个人觉得如果不是需要很大的持续的访问量的话,完全没有必

使用nodejs分别搭建一个服务器和客户端,模拟问答精灵

嘻嘻.最近在玩nodejs,在我的学习以及理解中nodejs的执行环境主要是分为三个部分的,首先会有一个global的全局对象,然后在这个全局对象中又包含有一个核心模块和文件模块(可以理解为是用户自己写的文件)的. 并且nodejs具有两个特点的,那就是1.是一个非阻塞的I/O模型,也就是说nodejs的操作是异步的.2.是基于事件驱动的程序设计思想的. 今天主要是通过自己搭建服务器和客户端,让两者之间进行通信,模拟出类似问答精灵的一个效果的.在这之前,我们是很有必要了解一下服务器与浏览器之间是

怎样用Nodejs搭建一个服务器

首先我们要知道nodejs有哪些内置模块,比如,http,fs,url,这三是必须要用的. http:超文本传输协议,fs:filesystem,文件系统,有了这个模块,我们就可以操作文件了,url就不用说了吧,来吧,开始吧 先用requirejs,引入模块 var http = require('http'),url = require('url'),fs = require('fs'); 然后创建一个服务; var server = http.createServer(function(re

搭建一个webpack微服务器

[前言]:因为最近在vue2.0的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到项目开发的"主体过程"中来,真是"物不尽其用".于是就有了我今天的这篇学习文章:利用webpack-dev-server搭建一个webpack的服务器 参考资料: webpack-dev-server的github地址:https://github.com/webpack/w

用 LVS 搭建一个负载均衡集群(转)

http://blog.jobbole.com/87503/ 第一篇:<如何生成每秒百万级别的 HTTP 请求?> 第二篇:<为最佳性能调优 Nginx> 第三篇:<用 LVS 搭建一个负载均衡集群> 这篇文章是<打造3百万次请求/秒的高性能服务器集群>系列的第3部分,有关于性能测试工具以及优化WEB服务器部分的内容请参看以前的文章. 本文基于你已经优化好服务器以及网络协议栈的基础之上,并使用 iperf 与 netperf 工具测试将服务器已优化到支持 5

用nodejs搭建一个简单的服务器

使用nodejs搭建一个简单的服务器 nodejs优点:性能高(读写文件) 数据操作能力强 官网:www.nodejs.org 验证是否安装成功:cmd命令行中输入node -v 如果显示版本号表示安装成功 [常用命令] 切换盘符 d:进入文件夹 cd nodejs返回上一级目录 cd..清屏 cls展示目录 dir复制文件名 选中右键--复制历史操作 上箭头 执行文件 node 文件名(在文件文件夹目录中)停止命令行 ctrl+c nodejs可以使用的ECMAScript.读写文件.数据库操

nodejs基础 用http模块 搭建一个简单的web服务器 响应纯文本

首先说一下,我们平时在浏览器上访问网页,所看到的内容,其实是web服务器传过来的,比如我们访问www.baidu.com.当我们在浏览器地址栏输入之后,浏览器会发送请求到web服务器,然后web服务器根据请求所携带的信息,返回内容. 那么,nodejs中的http模块,就是用来搭建web服务器用的. 下面来简单的搭建一个服务器: var http = require("http"); //request:是请求参数,携带这请求所带来的信息.response:是响应参数,携带者将要返回到

vue+elementUI框架,nodejs+router搭建本地服务器,数据库用mongoose,axios请求碰到的一些问题

在做这个项目练手时碰到的一些问题记录一下,加深印象 服务器的目录层级如下: 一.简单的搭建一个服务器,如何划分路由 1.在搭建好的后端服务器  app.js 中导入路由,代码如下: var express = require('express') // 导入路由 用户 var user = require('./router/user.js') var app = express() app.use(express.static('public')) // 在路由配置前添加以下代码 解决跨域问题