浅谈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 图片等比例缩放代码
May 13 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
Js的Array数组对象详解
Feb 22 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
了解JavaScript中的选择器
May 24 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
原生js实现表格翻页和跳转
Sep 29 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时间戳使用实例代码
2008/06/07 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
php连接mysql数据库
2017/03/21 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python中struct模块之字节型数据的处理方法
2019/08/27 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
python中pivot()函数基础知识点
2021/01/03 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
上海方立数码笔试题
2013/10/18 面试题
学校工作推荐信范文
2014/07/11 职场文书
鸡毛信观后感
2015/06/11 职场文书
党员反邪教心得体会
2016/01/15 职场文书
JavaScript原型链详解
2021/11/07 Javascript
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL