浅谈webpack-dev-server的配置和使用


Posted in Javascript onMay 17, 2018

本文介绍了浅谈webpack-dev-server的配置和使用,分享给大家,具体如下:

1安装的WebPack-dev-server

在终端输入

npm i webpack-dev-server

安装webpack-dev-server包

2.配置dev-server

在package.json文件中的脚本中添加代码

"dev":"WebPack-dev-server --config webpack.config.js”

在webpack.config.js文件中全局添加

target:"web"

终端输入

npm i cross-env

安装env

配置环境变量

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

在webpack.config .JS文件中添加语句

const isDev = process.env.NODE_ENV ==='development'

判断isDev的值是否与development相等

将module.exports改为常量的配置并添加语句

module.exports = config

可以方便更改配置

在webpack.config.js中添加语句

if(isDev){
 config.devtool =“#廉价模块-EVAL-源映射”//代码映射
 config.devServer = {
  port:8000,//启动服务监听端口
  host:'0.0.0.0',//可以通过localhost访问
  overlay:{//在页面上显示错误信息
   errors:true,
   },
   open:true,//启动webpack-dev-server时自动打开浏览器
   hot:true //启用热更
 } 
 config.plugins.push(
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin()//热更相关插件
 )
}

3.创建HTML页面

终端输入

npm i html-webpack-plugin

安装html-webpack-plugin插件

在webpack.config.js中添加语句

const HTMLPlugin = require('html-webpack-plugin')

配置

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HTMLPlugin()
  ]

完成以上步骤后,终端输入

npm run dev

打包完毕之后,打开浏览器,输入地址本地主机:8000即可进入页面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
javascript实现yield的方法
Nov 06 Javascript
jquery禁用右键示例
Apr 28 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
Node.js模块全局安装路径配置方法
May 17 #Javascript
create-react-app修改为多页面支持的方法
May 17 #Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 #Javascript
微信小程序自定义多选事件的实现代码
May 17 #Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 #Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 #Javascript
vue 路由嵌套高亮问题的解决方法
May 17 #Javascript
You might like
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
webpack3之loader全解析
2017/10/26 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python批量实现Word文件转换为PDF文件
2018/03/15 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
白血病捐款倡议书
2014/05/14 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
离职信范本
2015/06/23 职场文书
Python制作春联的示例代码
2022/01/22 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
MySQL优化之慢日志查询
2022/06/10 MySQL