7.Webpack--devServer

一、搭建本地服务器

 

 

 

 二、方式一watch

 

 

 

 三、方式二：webpack-dev-server

 安装：

 

新的脚本：

 

要知道的是这个是通过webpack-cli来解析的。 

然后npm run serve后再修改内容，就能做到实时更新了。

另外我们会发现build文件里面是空的，这是因为webpack-cli依然是有对源代码进行编译和打包的，但是没有作为文件输出。

 

 

 

 四、关于devServe的一些配置

webpack5已经没有contentBase这个属性了：

 

 首先contentBase这个属性可以设置当没有，如果一个资源没有从webpack中提供服务，那么可以从这个里面提供服务。

我们之前是使用CopyWebpackPlugin对public中的文件做复制的，现在如果没有做复制，那么到时候有些资源可能找不到，又想

让这个东西可以提供服务，那么我们就应该把devServer的contentBase改成“./public”.

webpack5中要这么设置：

 

 五、HMR

 

 

 

 在真实开发中，不需要这样，太麻烦了！

 

 

 

 

 

 六、devServer的一些其他配置：