webpack使用笔记(二)

热更新之webpack-dev-server

作用

webpack-dev-server插件提供热更新功能

安装

npm install webpack-dev-server --save-dev

配置

1. 利用node配置，server.js文件如下

var config = require("./webpack.config.js");var webpack = require('webpack');var WebpackDevServer = require('webpack-dev-server');config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");var compiler = webpack(config);var server = new WebpackDevServer(compiler, {    contentBase:'dist/'});server.listen(8080);

1. 更新package.json文件的script选项

 "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "webpack": "webpack --config webpack.config.js --watch --progress --display-reasons --display-modules --colors",    "dev": "webpack-dev-server --open --devtool eval --progress --colors --inline --hot --content-base dist"  },

由于webpack-dev-server是将打包后的代码放在内存中，因此不会生成dist目录。

1. 运行npm run dev即可在浏览器自动打开http://localhost:8080,更新人格app.js的内容或者引入的模块都会在页面实时更新。

两种监听模式

• inline模式
  
  • 在命令行添加--inline命令
  • 在webpack.config.js中添加devServer:{inline:true},只有对命令行有效

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");

也是开启inline模式

• iframe模式
  
  • 在webpack.config.js中entry里添加webpack/hot/dev-server
  • 在webpack.config.js中添加new webpack.HotModuleReplacementPlugin()
  • 前面server.js中配置，添加hot:true

var server = new WebpackDevServer(compiler, {    hot:true});