浅谈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对URL字符串进行编码/解码分析
Oct 25 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
浅析node.js中close事件
Nov 26 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 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
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
jquery validate poshytip 自定义样式
2012/11/26 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python写日志封装类实例
2015/06/28 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python实现上传下载文件功能
2020/11/19 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
2014年教师节演讲稿
2014/09/03 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android