webpack使用笔记(二)

热更新之webpack-dev-server

作用

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

安装

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

配置

利用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); 更新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目录。

运行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 });