三分钟使用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的意思是开发者环境下
命令添加完成,我们就可以通过npm run dev来运行项目了,用过vue-cli的同学,有没有很熟悉的感觉,哈哈
默认端口号是8080,也可是自己手动去修改端口号,怎么改就不说了超简单的,查一查网上有详细教程
这个时候就证明成功了,在网页上打开http://localhost:8080就可以看到页面了,
这个时候让我们修改一下index.js看看会发生什么
var el = document.getElementById('app');
el.innerHTML = '我被改变了!';
ctrl+s保存,切换回浏览器无需刷新,看一下页面的字是不是变了;
搞定,收工!
- windows API 开发飞机订票系统 图形化界面 (二)
- SQL SERVER几种数据迁移/导出导入的实践
- dom4j 使用总结
- 快速对表的某字段赋递增的数值
- SQL SERVER修改函数名引起的问题
- SQL Server安全(1/11):SQL Server安全概述
- SQL Server安全(2/11):身份验证(Authentication)
- SQL Server安全(3/11):主体和安全对象(Principals and Securables)
- 在SQL Server里如何进行页级别的恢复
- 你可能不知道的字符比较中的“秘密”
- c++实现简单计算器
- re模块(正则表达式)
- Python学习——collections系列
- 为stackGan一个工程创建一个虚拟环境,python 2.7 tensorflow0.12-tensorflow 1.01
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CephFS 文件布局性能测试对比
- MySQL 8.0 新特性:极速“备份恢复工具”,Clone 插件
- CephFS 介绍及使用经验分享
- CephFS源码分析
- linux cache介绍及控制
- Lustre文件系统安装
- Lustre参数调整
- samba源码安装及调试
- 设计模式实战-状态模式,让代码更清爽简洁
- 改善深层神经网络——吴恩达深度学习课程笔记(二)
- Spring Boot 监听 Redis Key 失效事件实现定时任务,超时订单自动关闭绝佳实现
- TensorFlow的核心概念:张量和计算图
- 四连问:API 接口应该如何设计?如何保证安全?如何签名?如何防重?
- TensorFlow基础:创建计算图
- TensorFlow基础:常量