webpack-dev-server的安装

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.

注意:webpack-dev-server是一个独立的NPM包,你可以通过npm install webpack-dev-server来安装它.

发现报错了;原因是我们用的1.15.0的webpack版本低了;需要3或者4点几的版本

重装webpack/或者降低    webbpack-dev-server

再装一次npm install webpack-dev-server

我又尝试了第二种方法;在局部我安装了一个1.16.5的webpack-dev-server

还在全局安装了一个

但 在起用的时候却报错了;

卸载node_modules 再输npm install 即可,

在局部装一个

会发现webpack的版本太低

输入 webpack-dev-server会报错

安装一个file-loader即可

再装一个全局的

!!!!注意如果我们的webpack-dev-server想当成命令行来用的话;我们需要在全局也装一个[email protected] -g

执行成功后

找到它提供的地址:

把地址放浏览中打开

 

如果我们想用依赖方式打开webpack-dev-server 我们需要在webpack.config.js中加上

然后在git命令中输入:

 webpack-dev-server --inline --port 8088

再找到下面这一段贴在浏览器上:

会发现这样没有了上面那一条蓝色

成功后;你会发现我们写的内容;在git中有时时更新;但在页面中还是一片空白;或者如果加了图片;它会报错;像这种情况我们应该在

output中加入一个PublicPath这个属性,它配置时是我们访问的路径;而Path属性是我们存放 的路径

目前页面可以完美显示;但是在webpack.config.js中还是有些问题如:

 

webpack-dev-server/client?http://localhost:8088/

我们把它打包进了commn模块,但是在线上的时候这个也会被打包进去,可是它却对我们线上环境是没有作用的,它只是我们开发时用的一个工具,像这种情况我们可以配置一些东西:

这个东西在nodejs中有一个环境变量

console出变量是什么

起动服务器:如果是苹果和linux要在前面加变WEBPACK_ENV=dev

 

如果是windows:

 

set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088

 

 

之后在文件的后面加上这一段;这段是从入口对象剪切过来的;