webpack 项目使用webpack-dev-server 自动编译 （2）

在上一篇的博客中我们使用webpack 创建了一个项目

          创建webpack 项目（1） https://blog.csdn.net/datouniao1/article/details/119426913

我们继续上节课的内容，在我们创建的webpack项目中,使用webpack-dev-server

webpack-dev-server 类似于tomcat 能实现将webpack 部署，通过localhost:xxxx的方式打开

在开发项目中能够实现实时的编译项目，将我们修改的代码立即的呈现

1.安装webpack-dev-server

           cnpm i webpack-dev-server -g

       

 

 2.项目package.json中配置webpack-dev-server 

 3. 运行项目

        npm run dev

 在运行的时候出现了报错，在网上随便的百度一下，我们知道是webpack-dev-server 版本和webpack-cli的版本不兼容的，这里我们降低webpack-cli的版本

卸载原来的webpack-cli

 安装新的webpack-cli

cnpm i webpack-cli@3.3.12 -D

 

 重新运行：

npm run dev

 访问项目：

 

 

上面我们使用webpack-dev-server 将项目启动了，如果我们想要修改端口怎么办

我们在在package.json 中增加如下的配置：

 重新运行：

上面我们使用webpack-dec-server 运行了项目

现在我们看如果修改了代码，页面上会不会自动的编译

 

 

希望对你有所帮助