浅谈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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
js面试题之异步问题的深入理解
Sep 20 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
windows下安装php的memcache模块的方法
2015/04/07 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
python定时执行指定函数的方法
2015/05/27 Python
python xml解析实例详解
2016/11/14 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
校班主任推荐信范文
2013/12/03 职场文书
办公室前台岗位职责
2014/01/04 职场文书
培训专员岗位职责
2014/02/26 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技