npm脚本学习(二)启动:webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.j

一、webpack-dev-server
webpack-dev-server的官方介绍是:将webpack与提供实时重载的开发服务器一起使用。这仅应用于开发。也就是给我们提供一个可以实时重载的服务器,不需要我们改动代码后手动刷新,当然其中还提供了很多参数配置,有不同的作用。

const path=require('path')
const webpack=require('webpack') // 启用热更新 第二步
module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
     path:path.join(__dirname,'./dist'),
    filename:'bundle.js'},
    devServer:{
        open:true,//自动打开浏览器
        contentBase:"./", // 本地服务器在哪个目录搭建页面,一般我们在当前目录即可;
	    inline: true, // 用来支持dev-server自动刷新的配置,webpack有两种模式支持自动刷新,一种是iframe模式,一种是inline模式;使用iframe模式是不需要在devServer进行配置的,只需使用特定的URL格式访问即可;不过我们一般还是常用inline模式,在devServer中对inline设置为true后,当我们启动webpack-dev-server时仍要需要配置inline才能生效
	    hot: true, // 启用热更新, 第一步
	    host: HOST || config.dev.host,
	    port: PORT || config.dev.port
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()//new 一个热更新的模块对象,启用热更新 第三步
    ]
}

二、–host 0.0.0.0
增加这个配置是为了便于开发移动端的时候我们可以直接在手机上通过ip访问我们的电脑(手机和电脑在统一wifi下)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值