码迷,mamicode.com
首页 > Web开发 > 详细

webpack学习记录(二)-webpack-dev-server

时间:2020-03-15 11:47:37      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:ESS   安装   进度条   没有   观察   端口   module   ogre   oca   

webpack学习记录(二)-webpack-dev-server

应用场景

我们打包好js文件之后要观察效果的话就只能新建一个HTML并且把打包好的js文件引入进去,然后通过本地打开html文件查看效果,但是我们通常开发的时候都希望用localhost来访问,这时候我们就需要安装webpack-dev-server来达到之一目的了。

webpack-dev-server

webpack-dev-server 为我们提供了一个简单的 web 服务器,能够实时重新加载。 主要有下面两个功能:

  • 为静态文件提供服务
  • 自动刷新和热替换(HMR)
安装

npm i webpack-dev-server -D

使用

使用webpack-dev-server的好处之一就是它不会真实的去打包文件,而是生成在内存中。

  • npx webpack-dev-server

  • npm run dev

    在package.json字段中配置如下代码

    "dev": "webpack-dev-server"

如果没有配置,则会以当前目录作为静态目录

配置

在webpack.config.js中module.exports下添加如下配置

devServer: {
    port: 3000, //端口号
    progress: true, //进度条
    contentBase: './dist',  //指定目录作为静态目录
    open: true, //自动打开浏览器
    compress: true  //gzip压缩
}

webpack学习记录(二)-webpack-dev-server

标签:ESS   安装   进度条   没有   观察   端口   module   ogre   oca   

原文地址:https://www.cnblogs.com/Arohaa/p/12496431.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!