webpack搭建服务器,随时修改刷新
前提: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
显示出来的是:
以上就是我所分享的内容,纯属原创,欢迎阅读与转载,请注明出处!
转载于:https://www.cnblogs.com/wuzhiquan/p/6724349.html
webpack搭建服务器,随时修改刷新相关推荐
- webpack搭建服务器
webpack-dev-server是一个小型的Node.js Express服务器,我们可以通过它搭建一个本地服务器,并且实现文件热更新;先确保你本地有安装npm,node 1.切换到你的目录下对项 ...
- webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
- tgp饥荒服务器修改人数,求饥荒TGP联机版的搭建服务器教程有多详细要多详细
求饥荒TGP联机版的搭建服务器教程有多详细要多详细 关注:224 答案:2 信息版本:手机版 解决时间 2019-01-11 05:53 雪舞兮 2019-01-10 20:43 求饥荒TGP联机 ...
- node修改服务器默认端口,用node+express搭建服务器,解决跨域问题,更改端口号...
在学习前端的过程中,最开始我们需要展示在页面上的数据都是写死在系统里的假数据.然而,实际上前端是要与后台服务器交互进行数据存取的.如何搭建服务器见下文. 一.使用Node.js+express用命令行 ...
- 从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
- Express结合Webpack的全栈自动刷新
在以前的一篇文章BrowserSync,迅捷从免F5开始中,我介绍了BrowserSync这样一个出色的开发工具.通过BrowserSync我感受到了这样一个理念:如果在一次ctrl + s保存后可以 ...
- 前端进阶(二)webpack开发服务器环境配置
webpack开发服务器 webpack 使用 babel 处理高版本的 js 语法 babel 的介绍 => 用于处理高版本 js语法 的兼容性 安装包 yarn add -D babel-l ...
- webpack搭建自己的项目
使用代理的方式参考地址:http://www.cnblogs.com/wangyongcun/p/7665687.html npm 常用模块 npm init 创建package.json文件 一值回 ...
- 基于webpack搭建前端工程解决方案探索
关于前端工程 \\ 下面是百科关于"软件工程"的名词解释: \\ \ 软件工程是一门研究用工程化方法构建和维护有效的.实用的和高质量的软件的学科. \ \\ 其中,工程化是方法,是 ...
最新文章
- R语言使用ggplot2包使用geom_boxplot函数绘制基础分组箱图(分组箱体框颜色调色板配置)实战
- rmi远程代码执行漏洞_【漏洞通告】Apache Solr远程代码执行漏洞
- oracle 并发请求跟踪,在保留在oracle数据库中的同时处理并发请求?
- 【ABP框架系列学习】模块系统(4)
- [转]MyBatis中resultType与resultMap区别
- [资源]181个Python开源项目分享!
- 面前的大山一座接一座
- php+mysql执行sql文件路径_PHP———MySQL笔记(5)之MySQL数据库导出导入sql文件(详细)...
- P2440 木材加工(二分答案)
- MT4外汇结余净值可用预付款
- React(4. 2)--数据流(实践篇)
- 成功解决wps文档中输入英文单词出现对应英文单词下边红色波浪线(英文拼写自动检测)去掉或加上图文教程
- 007-Cobbler批量自动化部署Windows10和Server 2019及激活
- 长链剖分 - 攻略(BZOJ3252)
- oracle运维与mysql_运维日记| MySQL/Oracle深度解析之一:逻辑读
- P1413 坚果保龄球——题解2020.10.10
- 一行python并行加速for循环_加速列表和for循环python
- 强制用户使用定向推送功能是什么意思?整改措施请收好
- LabVIEW 读取 tdms文件并存为csv
- web页面uri唤醒应用_带有数据URI的高性能Web设计
热门文章
- 计算机技能大赛初赛主持稿,职业技能大赛开幕式主持词
- 2021年高考成绩查询贵州一本线,2021年贵州高考一本分数线预测,今年贵州一本分数线预估多少分...
- 安卓 camera 调用流程_音视频开发之旅(四)Camera视频采集
- linux虚拟化桌面协议,桌面虚拟化传输协议之android spice
- 添加防火墙策略_网络安全文章基础篇(第5张)防火墙项目实战笔记
- 单例模式访问mysql设计类图_利用单例模式设计数据库连接Model类
- Android获取网页源代码
- 变位齿轮重合度计算公式_渐开线圆柱齿轮传动的重合度计算.pdf
- kafka的消费者客户端偏移的维护
- VB如何读取快捷方式的目标路径