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

posted @ 2019-01-20 18:39  songxia777  阅读(1220)  评论(0编辑  收藏  举报