使用webpack构建本地服务器
想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack
提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖。
1、安装webpack-dev-server
配置好后执行 webpack-dev-server,这时候会报错。需要在package.json
加上服务器信息。
2、在package.json
中的scripts
对象中添加如下命令,用以开启本地服务器
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
3、下载好之后需要在webpack.config.js里面配置下devServer
const path = require('path');
module.exports={
//入口文件的配置项
entry:{
entry:'./src/index.js'
},
//出口文件的配置项
output:{
//输出的路径,用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'bundle.js'
},
mode:"development",
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{
contentBase:path.resolve(__dirname,'dist'),//本地服务器所加载的页面所在的目录
host:'192.168.118.221',
compress:true,
port:
}// 配置webpack服务
}
host是你自己的ip地址,port是端口号
devserver作为webpack配置选项中的一项,以下是它的一些配置选项
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
4、配置好后,在终端执行npm run server,发现还是会报错。如下图所示,webpack-cli没有安装
5、安装webpack-cli:
注意:需要全局和局部都安装。先npm install webpack-cli -g,再npm install webpack-cli -D,否则的话,依然会报上面的错误。
6、执行npm run server
执行成功
使用webpack构建本地服务器的更多相关文章
- webpack构建本地服务器
webpack构建本地服务器 想不想让你的浏览器监测你的代码的修改,并自动刷新修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建, 可以实现你想要的这些 ...
- webpack开启本地服务器与热更新
第一个webpack本地服务 webpack本地服务相关的一些操作指令与应用 一.第一个webpack本地服务 //工作区间 src//文件夹 index.js//入口文件 index.css//测试 ...
- [转]webpack配置本地服务器
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- webpack 之搭建本地服务器
搭建本地服务器 webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现 我们想要的让浏览器自动刷新显示我们修改后的结果 不过它是一个单 ...
- webpack(10)webpack-dev-server搭建本地服务器
前言 当我们使用webpack打包时,发现每次更新了一点代码,都需要重新打包,这样很麻烦,我们希望本地能搭建一个服务器,然后写入新的代码能够自动检测出来,这时候就需要用到webpack-dev-ser ...
- Jenkins构建本地项目到服务器上自动部署的方法
博主原创,转载请注明. 最近在用Jenkins做项目的自动部署,由于项目需求,现在要在本地构建后再放到Tomcat里.以下是本地构建步骤: 名称填写好,下面的选项是可选的. 源码管理这里选择none. ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
- webpack构建具备版本管理能力的项目
webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...
随机推荐
- 如何加快Eclipse的启动速度?
http://it.taocms.org/12/6457.htm 浅析配置更快的Eclipse方法 What is the Metadata GC Threshold and how do I tun ...
- 【 Linux 网络虚拟化 】Netns
netns 可以创建一个完全隔离的新网络环境,这个环境包括一个独立的网卡空间,路由表,ARP表,ip地址表,iptables等.总之,与网络有关的组件都是独立的. 创建网络空间: # ip netns ...
- import详解
试想一下 在工作中今年在一个项目中可能会导入某一个目录下的模块文件,那这个时候怎么样才能让Python解释器能够找到该模块进行调用呢? - 将这个模块拷贝一份到当前使用目录下. 这种方式让模块太冗余 ...
- poj 3608(旋转卡壳求解两凸包之间的最短距离)
Bridge Across Islands Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9768 Accepted: ...
- mysql数据库设计之物理设计
一.存储引擎 推荐使用Innodb,这也是mysql默认使用的存储引擎,支持事务 二.属性的选择 字符选择: 1.char,存定长,速度快,存在空间浪费的可能,会处理尾部空格,上限255字节.(utf ...
- [BZOJ3027][Ceoi2004]Sweet 容斥+组合数
3027: [Ceoi2004]Sweet Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 135 Solved: 66[Submit][Status] ...
- React Native - 0序言
1. 什么是React Native? React Native是Facebook在React.js Conf 2015大会上推出的一个用于开发Android t iOS App的一个框架.主要编程语 ...
- centos6 部署strongloop
1.安装node 1)下载官方二进制包 cd /opt wget https://nodejs.org/dist/latest-v7.x/node-v7.10.0-linux-x64.tar.gz 2 ...
- 51nod 1459 迷宫游戏【最短路拓展】
1459 迷宫游戏 基准时间限制:1 秒 空间限制:131072 KB 你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间,你就可以得到这个分数.还有若干双向道路连 ...
- Codeforces #439 Div2 E
#439 Div2 E 题意 给出二维平面,有多个询问: 把某一区域围起来(围墙之间无交点) 移除某一区域的围墙(此时保证围墙一定存在) 选定两个位置问是否可以互相到达 分析 看起来很复杂,其实这道题 ...