开发服务器devServer配置(webpack)

Posted Liane

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了开发服务器devServer配置(webpack)相关的知识,希望对你有一定的参考价值。

devServer为我们提供了开发过程中的服务器,是一个使用了express的HTTP服务器,它的主要作用是为了监听资源文件的改变,该http服务器和client使用了websocket通信协议,只要资源文件发生改变,webpack-dev-server就会实时的进行编译。
需下载webpack-dev-server包
1、安装

npm i webpack-dev-server -D

2、webpack5需在webpack.config.js中添加target属性,实现自动刷新

module.exports = {
    entry: \'xxx\',
    output: \'xxx\',
    module: {...},
    plugins: [],
    target: \'web\',
    mode: \'xxx\',
}

3、启动:在命令行中输入webpack serve启动,也可在package.json中scripts参数后指定命令

"scripts":{
    "dev": "webpack serve --mode development",  /*执行npm run dev开启devServer,并设置打包模式为开发模式*/
    "bulid": "webpack --mode production" /*执行npm run bulid以生产模式打包*/
}

4、配置参数:在webpack.config.js中添加devSever

devSever: {
    port: 8080,  /*指定端口号*/
    compress: true,/*开启自动压缩*/
    open: true /*自动开启浏览器*/
}

以上是关于开发服务器devServer配置(webpack)的主要内容,如果未能解决你的问题,请参考以下文章

webpack学习之——创建devServer开发环境

webpack中devServer的使用及其他配置

webpack5之devServer

Webpack 配置

webpack开发全家桶

webpack开发全家桶