实用webpack-dev-server

webpack-dev-server的作用

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

测试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将这些操作放在内存中执行

关于两种监视模式

• 第一种是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/ 查看，编译的提示信息在控制台可以查看

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

其他功能

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

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

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