webpack-dev-server

开启服务器，可以做代理的功能很好用。

cnpm install -D webpack-dev-server

查看webapck-dev-server的配置参数，直接在命令行webpack-dev-server -h ,要想看别的依赖包（npm包），直接去npm查看详情：https://www.npmjs.com/enterprise。

一些足够的配置：

const path = require("path");

const PATHS = {
    app:path.join(__dirname,"./src/index.js"),
    build:path.join(__dirname,"dist"),
    publicPath:"/"
};

const webpack = require("webpack");

module.exports=function(env,argv){
        return {
            entry: {
                main: PATHS.app,
            },
            mode: "development",
            output: {
                path: PATHS.build,
                filename: '[name].boundle.js',
                publicPath:PATHS.publicPath,
            },
            devServer: {
                    historyApiFallback: true,
                    contentBase:path.resolve(__dirname,'dist'),
                    quiet: false, //控制台中不输出打包的信息
                    noInfo: false,
                    inline: true, //开启页面自动刷新,
                    hot:true,
                    publicPath:PATHS.publicPath,
                    stats:'errors-only',
                    lazy: false, //不启动懒加载
                    compress:true,//开启后端gzip
                    progress: false, //显示打包的进度
                    overlay:{  //把编译的错误显示在浏览器上
                        errors:true,
                        warnings:true,
                    },
                    watchOptions: {
                        aggregateTimeout: 300
                    },
                    port: '8099', //设置端口号
                    //其实很简单的，只要配置这个参数就可以了
                    proxy: {
                        '/INFManage': {
                            target: 'http://localhost:8080',
                            secure: false,
                            changeOrigin:true,
                        }
                    }
                    },
                plugins:[
                      //热更新替换，写插件，就要在运行的node命令加 --hot
                      new webpack.HotModuleReplacementPlugin(),
                      new webpack.NamedModulesPlugin(),//显示模块的名字，默认是显示模块id
                ],
        };
}

根据实验，现在我能做的真正的模块热更新是根据这篇文章的配置：http://www.cnblogs.com/stoneniqiu/p/6496425.html。

明白了，module.hot.accept(),的用法，具体该怎样实现模块额热替换。先看package.json，怎样启动服务和热更新配置。一般都是在开发环境用，所以在生产环境不要使用热更新插件，以免增加不必要的代码，而且完全没有用。

把主要的代码放在componet.js,改变这个模块的js内容，让浏览器不刷新但是用最新的js文件css文件，

这样确实做到模块的热更新，可是得使用webpack-dev-server^2.4.1 ,"webpack":"^2.2.1"，使用最新的版本webpacj@4.6.x搭配webpack-dev-server@3.1.4却不行了。我已经把配置变得一样，可最新的版本还是不行。连续搞这没看热更新3天，只要是放在最新webpack4，就是不行，也不报错。就是HMR不工作，怎么看出来的呢？就是启动服务后，修改js文件后，浏览器的控制台只是输出WDS信息，根本没有HMR check server 更新新的模块。也就是根本没有调用 module.hot.accept(),这个方法。

差了很多文章，有的说在入口entry 加上 热更新额路径

然而并没有什么用，有人说这是用nodejs启动服务，不用webpack-dev-server启动时才要加。网上一大堆讲热更新的，方法都是差不多，也就那几个配置， --hot。--inline。配置方面我是真找不出原因了，目前webpacj@4.6.x搭配webpack-dev-server@3.1.4。然而webapck@2.x 搭配webpack-dev-server@2.X可以没问题。那就换升级版本。直接 cnpm i -D webpack 不能更新，说是已经安装了。那就用 cnpm i -D webpack@3.x , 3.x配2.x的server 也没问题。换成webpack4.x 得安装webapck-cli ，不然报错，而且4.x搭配webpack-dev-server2.x会报错，最后变成webpack4..8.x 搭配 webpack-dev-server3.x，都是最新的版本。发现之前的配置可以热更新了。对比了发现，之前使用webpack4.6.X ，原来得用webpack4.8.x。以后一定的记得一用最新额版本就都用最新的。并且注意各个版本的依赖包要用对应正确版本。

码云地址地址demo :https://gitee.com/sekin/webapck-hot

还有一种使用nodemon 同时监听前端和后端的代码改变，实现无刷新更新，

注意当使用babel转化js时，要是使用了编译环境loader :babel-preset-env,默认是将ES6模块编译成CommonJs模块，这样会导致模块热更新HMR使用不了，可以配置配置{modules:false}，则不会编译模块类型。

React保留上次的状态的热更新。

详解地址：https://www.jianshu.com/p/bcad129a1c69

更多关于webpack-dev-server的配置可以看https://github.com/huruji/blog/issues/10

Previouspostcss处理cssNextHMR热更新原理

Last updated

Was this helpful?