WebPack第三讲------服务器配置

上一篇: WebPack第二讲------基本配置 
https://blog.youkuaiyun.com/oracle8090/article/details/106387046

目录

一.全局安装   npm install -g webpack-dev-server

二.项目依赖安装 在项目根目录执行

三.运行webpack服务器 

四.访问地址

五.快捷执行方案

六.关闭刚刚运行的服务器 重新执行命令

七.修改服务器配置

方式一、修改配置文件方式

1.修改访问的根目录

2.更改端口 

方式二、修改命令方式 

3.有些命令只能是命令行传参

---

一.全局安装
   npm install -g webpack-dev-server

二.项目依赖安装 在项目根目录执行

npm install -D webpack-dev-server

执行的时候报错更换了命令 

cnpm install -D webpack-dev-server

三.运行webpack服务器 

webpack-dev-server 

四.访问地址

五.快捷执行方案

六.关闭刚刚运行的服务器 重新执行命令

发现其实执行的也是webpack-dev-server命令

七.修改服务器配置

参考 https://www.webpackjs.com/configuration/dev-server/

方式一、修改配置文件方式

1.修改访问的根目录

devServer:{
        contentBase: path.join(__dirname, "dist")//把dist当做项目的根目录
    }

再进行访问直接就到了访问打包目录了

配置服务器的好处就是默认热更新,只要你改了js代码,页面不需要刷新就可以更新展示

2.更改端口 

devServer:{
        contentBase: path.join(__dirname, "dist"),//把dist当做项目的根目录
        host: "0.0.0.0",
        port: 8082
    }

方式二、修改命令方式 

先注释到之前修改的

 "start": "webpack-dev-server --content-base dist"

重新关闭服务器运行,服务器又变回原来的8081

3.有些命令只能是命令行传参

加上这个命令就可以看到进度百分比了