实用webpack-dev-server

1. webpack-dev-server的作用

   • 文件作出改动之后，保存，立即开始编译文件
   • 编译后的文件是保存在内存中的，在项目文件夹中看不到编译后的文件
   • 编译完成之后立即自动刷新浏览器

2. 测试webpack-dev-server先建立一个小的demo，按照下面的方式敲命令

       npm init -y
       npm install webpack --save-dev
       npm install webpack-dev-server --save-dev 局部安装
       在项目文件夹中新建src目录，该目录下面存放开发文件，里面放入index.js
       在项目文件夹中新建dist目录，该目录下面存放打包后的生产文件，里面存入index.html
       编写webpack.config.js文件，做如下配置
       var path = require('path'); -> node.js的路径模块
       module.exports = {
           entry: './src/index.js',
           output: {
               path: path.join(__dirname, '/dist'), -> 必须是绝对路径
               filename: 'bundle.js',
               publicPath: '/css/' -> 这个选项是用来告诉webpack到这个路径下面去寻找资源，相当于是路径的一个别名，
               所以在html页面中这样引入js文件即可<script src="css/bundle.js"></script>，关于这个选项的作用网上的人解答参差不齐，误导众人
           }
       }
       在运行webpack-deb-server之前先使用webpack来打包一下 node_modules\.bin\webpack
       然后运行webpack-dev-server
       因为采用的是局部安装，win7下面这样运行 node_modules\.bin\webpack-dev-server --content-base ./dist
       用来监听dist目录下面的index.html，现在你可以随意的更改index.js文件的内容，可以实时编译刷新浏览器，
       细心的同学可能发现，其实bundle.js中的内容是没有变化的，webpack-dev-server将这些操作放在内存中执行
   

3. 关于两种监视模式

   • 第一种是Iframe mode

   开启这个模式什么都不用管 node_modules\.bin\webpack-dev-server --content-base ./dist
   这样开启webpack-dev-server后，通过http://localhost:8080/webpack-dev-server/即可查看
   在主页会有更新提示
   

   • 第二种是Inline mode

   通过 node_modules\.bin\webpack-dev-server --inline --content-base ./dist 这种方式开启
   然后通过 http://localhost:8080/ 查看，编译的提示信息在控制台可以查看
   

   • 并没有什么卵用，上面两种方式，个人感觉纯粹装逼专用

4. 其他功能

   • 开启热替换 node_modules\.bin\webpack-dev-server --inline --hot --content-base ./dist
     • 作用，当删除，添加模块时，不需要刷新页面
   • 杂项

   --quiet 隐藏打包信息
   --compress 压缩
   --progress 显示打包进度
   个人感觉上面无用
   

5. 上面的命令可以添加到npm的scrpit选项中去，简化操作