webpack学习之自动编译代码

对于每次代码发生改变时都要去手动运行，根据webpack官方文档总结出二种自动编译代码的方法。

• webpack`s Watch Mode
• webpack-dev-server

使用webpack`s Watch Mode

在package.json中添加用于启动观察模式的npm script脚本

"watch": "webpack --watch"

运行npm run watch就会编译代码，缺点是不会自动刷新浏览器。

使用webpack-dev-server

webpack-dev-server提供了一个简单的web服务器，能够实现重新加载。

执行:

--save-dev webpack-dev-server

在webpack.config.js中添加：

devServer:{
      contentBase: './dist'
      //告知webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
    },

如果修改代码时，服务器会自动重新加载编译后的代码并且浏览器也会自动刷新。

切记：webpack-dev-server需要局部安装，否则会报错（全局安装运行项目后也会报错）