webpack.config.js====webpack-dev-server开发服务器配置
1. 安装webpack-dev-server(在指定目录下),一定要先安装完毕webpack webpack-cli之后在安装webpack-dev-server
一个基于expressjs的开发服务器,提供实时刷新浏览器页面的功能
模块热替换:(相当于ajax局部刷新功能)
webpack --watch 或 webpack-dev-server 的功能是监听文件改变,就自动刷新浏览器,
而模块热替换,不用刷新浏览器,它是只让修改到的模块,才会在浏览器上发生相应的变化,而不是重新刷新浏览器。
模块热替换功能会在应用程序运行过程中替换、添加或删除模块,无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:
- 保留在完全重新加载页面时丢失的应用程序状态。
- 只更新变更内容,以节省宝贵的开发时间。
- 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
0.mini-css-extract-plugin文本分离插件在开发环境要关闭
1.修改devServer配置:设置hot:true
2.修改output中的filename: filename: './js/[name].[hash].js' 不可以使用chunkhash
3.引入var webpack = require('webpack');
4.实例化HMR热替换
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
webpack-dev-server实现热更新(HMR),就是一个基于node.js和webpack的小型服务器。
cnpm install webpack-dev-server --save-dev
2. 配置
/* * 配置webpack-dev-server * contentBase:设置基本目录结构 * compress:是否开启服务器压缩 * port:配置服务器端口号 * host:服务器的IP地址,可以使用IP也可以使用localhost * open:是否自动打开浏览器 * hot:是否开启热更新, 启用 HMR * hotOnly:是否只开启热更新,如果设置为true,只有热更新,就禁用了自动刷新功能 * */ devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000, host: 'localhost', open: true, hot: true, //hotOnly: true, },
https://blog.csdn.net/qq_34035425/article/details/81749985