webpack-dev-server的安装使用教程

这篇文章主要介绍了webpack-dev-server的安装使用教程，大家有个前提条件要清楚webpack-dev-server依赖webpack，我们需要先安装webpack，本文结合实例代码详细讲解,需要的朋友可以参考下

作用

相当于在本地开启了一个服务，我们可以通过http网络请求访问
提高了IO性能，因为webpack-dev-server将我们的文件编译后放到内存里面，以空间换时间
无需我们每次都需要手动编译我们的文件，我们每次保存文件，就会自动的帮助我们编译发布（注意：webpack4以上，也可以通过开启watch属性实现这个功能）

安装

运行环境

“webpack”: “^5.33.2”,
“webpack-cli”: “^4.6.0”

1.前提：

webpack-dev-server依赖webpack，我们需要先安装webpack

2.如果是webpack4以上我们还需要安装webpack-cli

npm install webpack --save-dev npm install  webpack-cli --save-dev

2.安装webpack-dev-server

npm install webpack-dev-server ---save-dev

3.编写webpack.config.js

因为webpack-dev-server完全依赖于webpack，所以我们需要编写webpack的配置文件
例如：

// path 模块解决项目路径问题 const path = require('path') module.exports = { //打包模式，一定要配置，不然打包速度慢很多 mode: 'development', //开发模式 // mode:'production',//生产模式 //入口 entry: path.join(__dirname, './src/main.js'), // __dirname 是node的通用变量，代表当前项目路径 output: { // 配置打包后文件存放目录 path: path.join(__dirname, './dist'), // 配置打包后文件的名称 filename: 'bundle.js' }, // 监听文件改动，自动打包 //  watch: true, devServer: { contentBase: path.join(__dirname, './'), // 指定发布后的映射的路径，./代表映射当前路劲 compress: true, // 压缩资源 port: 9000, // 指定服务器的端口号 open: 'Chrome', // 指定以哪个浏览器打开，open:true 代表以默认浏览器打开 }, }