一、项目依赖的配置

 "scripts": {
    "dev": "webpack",
    "watch":"webpack --watch",
    "start":"webpack-dev-server"
  },
1、"dev": "webpack"  运行 npm run dev 进行项目打包

2、运行 npm run watch 进行项目打包，并且webpack会一直监听项目打包的文件，只要被打包的文件发生变化，webpack就会自动帮我们打包；

3、运行 npm run start 就相当于运行 webpack-dev-server，这个时候webpack不仅帮我们监听被打包的文件，而且还会帮我们自动刷新浏览器；webpack-dev-server会帮我们在指定的路径下开启一个服务，

二、安装webpack-dev-server

npm install webpack-dev-server -D

三、webpack-dev-server的配置

 devServer: {
        contentBase: './bundle',
        open: true，
        proxy:{
                    '/api':'172.16.16.8'
       }，
       port:8081
    },

1、contentBase : 是指定在哪个路径下或者文件夹下中开启服务器；

2、open：true, 开启服务器时，自动打开浏览器；

3、proxy：跨域代理，如上述配置，比如当我们请求 /api 这个接口时，webpack会帮我们转发到172.16.16.8 这个地址；

4、port ：开启的服务器的端口

四、使用webpack-dev-server打包时为什么没有出现dist目录
当我们使用webpack-dev-server打包时，其实webpack也会对src目录下的文件进行打包的，不过是将src下的文件打包到电脑的内存中去，而不是打包到dist目录下，因为打包到电脑内存中可以提高打包速度；

当然webpack-dev-server的配置项还有很多，需要的时候可以百度或者访问官网；