webpack-dev-server(自动刷新页面)

一.最简配置
<1>package.json文件:
scripts的属性值增加-- "dev": "webpack-dev-server",
<2>webpack.config.js文件:
引入模块--
const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins新增插件--
new HtmlWebpackPlugin({
template: './index.html'
})
通过以上配置, 命令行输入 npm run dev, 打开 localhost:8080即可, 接下来只要更改文件内容并保存浏览器就会自动刷新. 当然以上前提是引入devServer包(npm install --save-dev webpack-dev-server).

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时.webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包, webpack-dev-server默认会以当前目录为基本目录. webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中. HtmlWebpackPlugin--生成html文件, 上述配置的意思是通过模板 index.html文件生成一个自动引用bundle.js文件的index.html文件, 该文件和webpack-dev-server生成的包一样存在于内存.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容