webpack自动编译

webpack自动编译

每次都要手动运行webpack进行编译很麻烦，所以我们可以通过配置让webpack可以自动配置

1.监听文件更改，在package.js内添加

将print.js中的内容修改正确。

运行cnpm run watch

2.此时还要手动刷新浏览器；我们可以使用webpack-dev-server，它提供了一个简单的web服务器和实时重载的功能（只刷新

页面不刷新控制台）

安装webpack-dev-server：

在webpack配置中：

在package中设置如下：

运行菜鸟cnpm run dev回自动开启Google浏览器并且监听80端口

此时，随意修改demo就会自动刷新页面。

3.接着往下看，如果你电脑的80端口被占用的话，那么你要如何重新设置端口。可以使用webpack-dev-middleware，他的作用是将webpack

处理后的文件发送到服务器的包装器，可以理解是webpack-dev-server功能的扩展是一个中间件。

安装如下：

修改webpack.config.js

在package.js中添加npm脚本运行服务器

运行如下：