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