苏南大叔继续描述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",
  },
  //...
}

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

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

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

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

相关链接

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: