我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

苏南大叔继续描述webpack4系列教程，默认仅仅支持.js的webpack，在支持了html模板之后，就具有了网站的小雏形。这个时候，就引入了一个服务器dev-server的概念。可以实时在线浏览这些html文件，并执行.js文件了。

苏南大叔：webpack4系列教程，如何自建服务器dev-server？ - webpack-dev-server-hero
webpack4系列教程，如何自建服务器dev-server？（图1-1）

当然，这个简易的dev-server是仅仅支持纯静态网页的，不支持php之类的动态语言。但是，这已经足够苏南大叔的测试需求了。这就是本文的主角：webpack-dev-server。测试环境：mac、node@14.2.0、npm@6.14.4、webpack@4.43.0、webpack-dev-server@3.11.0。

安装webpack-dev-server

同时，值得一提的是，这个dev-server可以代替webpack --watch模式。这个步骤非常简单，一笔带过。命令如下：

npm i webpack-dev-server -D

安装好之后，就可以在在当前目录下面，执行：

npx webpack-dev-server

当然，一般来说，是把这条命令放置package.json文件里面定义一下即可。

配置webpack-dev-server

webpack-dev-server的配置信息，可以放置在package.json里面，也可以直接跟在webpack-dev-server命令后面。对于webpack这件事情来说，苏南大叔更倾向于把配置放置在package.json里面。

webpack.config.js:

module.exports = {
    //...
    entry: {
        //...
    },
    output: {
        //...
    },
    plugins: [
        //...
    ],
    devServer: { // 配置 服务器 信息 
        contentBase: './dist', // 托管的目录
        port: 3000, // 指定端口号
        open: true, // 自动打开浏览器
        //...
    },
    //...
}

package.json:

{
  //...
  "scripts": {
    "start": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server",
    "dev2": "webpack-dev-server --open",
    "dev3": "webpack-dev-server --open --contentBase dist --port 3001",
    "dev4": "webpack-dev-server --open chrome --contentBase dist --port 3001",
  },
  //...
}

参数都非常好理解，指定站点根目录，自定端口号就好了。至于浏览器自动打开，肯定是要要这个特性的。不解释。执行对应命令后，就可以实时预览到自己修改的代码了。非常的方便，建议使用。

如果同时定义了上述两个地方，那么以直接跟在命令行后面的参数为准，也就是说定义在package.json文件里面的为准。

再次提示：它可以代替webpack的--watch命令，可以做到文件修改就自动刷新。

另外，值得注意的是：webpack-dev-server的dist目录，都是虚拟存在的，并不是真实存在于硬盘上。所以，如果您想得到最终的文件，还是需要使用webpack命令进行构建哦。切记切记。

这里可以设置默认打开的浏览器，如果你的默认浏览器不是chrome的话，加上chrome参数吧？苏南大叔想不出来，您不打开谷歌浏览器的理由。所以，就加上这个参数吧... 更多参数，可以参考：

相关链接

总结

使用webpack-dev-server命令吧，非常好用。当然还有更多的参数，如果你心情好，就去看看官方文档吧？

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   webpack