webpack学习记录-webpack-dev-server

Posted 2021-03-05 arohaa

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压缩
}