实用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选项中去，简化操作

巴特西

实用webpack-dev-server

最新文章

热门文章