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

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

苏南大叔:webpack4系列教程,如何自建服务器dev-server? - webpack-dev-server-hero
webpack4系列教程,如何自建服务器dev-server?(图1-1)

当然,这个简易的dev-server是仅仅支持纯静态网页的,不支持php之类的动态语言。但是,这已经足够苏南大叔的测试需求了。这就是本文的主角:webpack-dev-server。测试环境:macnode@14.2.0npm@6.14.4webpack@4.43.0webpack-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-serverdist目录,都是虚拟存在的,并不是真实存在于硬盘上。所以,如果您想得到最终的文件,还是需要使用webpack命令进行构建哦。切记切记。

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

相关链接

总结

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

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

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

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

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