浅谈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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
js密码强度校验
Nov 10 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
原生JS实现留言板
2020/03/26 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
对python中return和print的一些理解
2017/08/18 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
pygame实现简易飞机大战
2018/09/11 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python实现Virginia无密钥解密
2019/03/20 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
一道Delphi面试题
2016/10/28 面试题
淘宝店铺营销方案
2014/02/13 职场文书
员工入职担保书范文
2014/04/01 职场文书
人事任命书格式
2014/06/05 职场文书
社区文艺活动方案
2014/08/19 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
创业计划书之家教中心
2019/09/25 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang