浅谈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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
laypage分页控件使用实例详解
May 19 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
图形数字验证代码
2006/10/09 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
javascript之函数直接量(function(){})()
2007/06/29 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
python远程连接服务器MySQL数据库
2018/07/02 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
感谢信格式范文
2015/01/22 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
小学感恩节活动总结
2015/03/24 职场文书
答谢酒会主持词
2015/07/02 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
python中os.path.join()函数实例用法
2021/05/26 Python