浅谈webpack-dev-server的配置和使用

 更新时间:2018年05月17日 14:26:46   作者:冰水zzy   我要评论

本篇文章主要介绍了浅谈webpack-dev-server的配置和使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了浅谈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 关于元素获取焦点(隐藏元素与div)

    JavaScript 关于元素获取焦点(隐藏元素与div)

    关于元素获取焦点要注意2个小问题,需要的朋友可以参考下。
    2011-01-01
  • JS中改变this指向的方法(call和apply、bind)

    JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象,通过本文给大家介绍JS中改变this指向的方法(call和apply、bind),需要的朋友参考下
    2016-03-03
  • js实现二级导航功能

    js实现二级导航功能

    本文主要介绍了js实现二级导航功能的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • window.open关于浏览器拦截问题分析及解决方法

    window.open关于浏览器拦截问题分析及解决方法

    window.open是javascript函数,该函数的作用是打开一个新窗口或这改变原来的窗口,如果你直接在js中调用window.open()函数去打开一个新窗口,浏览器会拦截你,那么如何避免呢,感兴趣的朋友可以了解下本文或许对你学习有所帮助
    2013-02-02
  • 关于js内存泄露的一个好例子

    关于js内存泄露的一个好例子

    这篇文章主要介绍了关于js内存泄露的一个好例子。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js实现页面a向页面b传参的方法

    js实现页面a向页面b传参的方法

    这篇文章主要为大家详细介绍了js实现页面a向页面b传参的方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript操作表单实例讲解(上)

    JavaScript操作表单实例讲解(上)

    这篇文章主要介绍了JavaScript操作表单实例讲解(上)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JS操作时间 - UNIX时间戳的简单介绍(必看篇)

    JS操作时间 - UNIX时间戳的简单介绍(必看篇)

    下面小编就为大家带来一篇JS操作时间 - UNIX时间戳的简单介绍(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js实现ArrayList功能附实例代码

    js实现ArrayList功能附实例代码

    ArrayList功能想必大家都有所了解吧,本文使用js实现ArrayList功能并附实例代码,想学习的朋友可以看看
    2014-10-10
  • js获取元素的偏移量offset简单方法(必看)

    js获取元素的偏移量offset简单方法(必看)

    下面小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论