春风得意马蹄疾
一日看尽长安花

启用Webpack服务使用热更新

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它将在 localhost:8080 (也可手动配置端口)启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面

插件安装

"webpack": "^4.44.2",//webpack及脚手架
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"//webpack服务
  • 注:截至2020.10.26,webpack已更新至v5.2,webpack-dev-server更新至v3.11(版本稍低),这两个版本有冲突问题,预计未来两个月内webpack-dev-server将更新适配,如需现在使用webpack服务,需安装低版本webpack和脚手架,如上代码所示

webpack.config.js配置文件(仅展示webpack-dev-server的配置)

 //插件
    plugins:[
        //热更新第二步,使用热更新的插件
        new HotModuleReplacementPlugin()
    ],
  //webpack-dev-server 的配置
    devServer:{
        //webpack服务启动的目录
        //一般情况下,和output.path配置一样
        contentBase:path.join(__dirname,'./dist'),
        //服务器的域名
        host:'10.36.150.151',
        //端口号
        port:3000,
        //启动服务后,自动打开浏览器查看项目
        open:true,
        https:true,
        //代理的配置
        proxy:{
            '/api':{
                target:'http://www.baidu.com',
                changeOrigin:true
            }
        },
        //热更新,和自动刷新一样
        //热更新第一步:打开热更新
        inline:true,
        hot:true

    }
Like
Like Love Haha Wow Sad Angry
1
赞(0) 打赏
未经允许不得转载:栗子纪blog » 启用Webpack服务使用热更新
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x