上回书我们说了些webpack的初期配置，到了最后我们精简到一个webpack命令就可以把一个main.js文件编译成浏览器支持的bundle.js文件。那我们的欲望是无情无尽的。其实webpack还是不能满足我们这群懒猪。我们其实想更方便，不用敲击命令让他直接编译。哈哈，这期我们就满足你们的欲望，欢迎大家来到 webpack-dev-server篇

命令行 npm i webpack-dev-server -D 回车

安装过后出现了很多警告，也不知成功没成功，先试试吧！

命令行敲击webpack-dev-server，结果不行

还需要本地安装，我们打开package.json，修改Dev的值

然后 npm run dev 结果报一堆错

把node-modules都删掉 然后 打开package.json，把该删的都删了，改的都改了。

然后 cnpm i 回车

然后重新安装webpack-dev-server（ npm i webpack-dev-server -D）

然后本地安装webpack (cnpm i webpack -D)

再把package.json打开 把dev改回去

最后npm run dev刷新

（以上步奏均无报错）

结果···

缺少了webpack-cli 插件

cnpm i webpack-cli 安装一个呗

然后 cnpm i jquery 重新安装

最后npm run dev

如果还是报错，就才删node-modules再来一遍。第二次 我们成功了

这回我们就不能直接文件打开了，要通过webpack-dev-server创建的服务器打开

点击网址进入（另外）

记得把src改成src=‘/bundle’。应为HTML引入的是服务器的bundle.js 不是一样的

然后进入浏览器界面

点击src，网页就出来了啦！以后再在webstorm修改，直接切到浏览器界面就看见变化啦！

下面我们再看一些webpack-dev-server的常用配置

打开package.json文件

--open：自动打开浏览器

--port 8888：自动设置端口号

--contentBase src:设置src为项目根路径

--hot：热重载（不用每次更改都加载整个文件，而是打了几个补丁，加进去即可，节约内存）

好了，讲完了，下节我们讨论html-webpack-plugin