深入浅出webpack之DevServer和HMR

我们目前这种webpack的开发模式是存在问题的

• 问题一：每次修改完源代码之后，我们都需要重新进行npm run build才行

  • 通过watch监听源代码的改变（这种方式开发模式是由watch监听和vscode插件live-server来进行刷新浏览器，这种方式缺点是每次都需要重新编译，重新生成dist文件，并且live-server每次都是刷新整个页面）

    // 第一种方式：修改package.json
    {
      "scripts": {
        "build": "webpack",
        "watch": "webpack --watch"
      }
    }
    //////////////////////////////////////////////////////////////
    // 第二种方式：修改webpack.config.js
    // webpack.config.js
    module.exports = {
        // 只需这样设置，执行npm run build依然可以启动watch监听
        watch:true
    }
    

  • webpack-dev-server（这种方式开发并不会生成打包后的dist文件夹，而是使用memfs这个库直接编译后到电脑内存中，然后启动的服务就直接读取内存中的文件，性能会更高。默认也是重新加载整个页面，需要配合HMR来进行模块热替换效率会更高）

    // npm i webpack-dev-server -D
    // 修改package.json
    {
      "scripts": {
        "serve": "webpack serve",
      }
    }
    

    • 认识模块热替换HMR（Hot Module Replacement）（模块热替换是指在应用程序运行过程中，替换，添加，删除模块，而无需重新刷新整个页面）

    • HMR通过以下几种F方式来提高开发速度。不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；只更新变化的内容，节省开发的时间；修改了css，js源代码会立即在浏览器更新，相当于直接在浏览器得devtools中直接修改样式

    • 框架的HMR（以vue为例，vue的HMR加载需要使用vue-loader，而vue-loader加载的组件会默认帮助我们进行HMR处理）

      // vue-loader@15 vue-template-compiler用来解析template模版代码
       npm i vue-loader@15 vue-template-compiler -D
       const path = require('path');
       const HtmlwebpackPlugin = require('html-webpack-plugin')
       const {VueLoaderPlugin} = require('vue-loader/lib/plugin')
        module.exports = {
           mode:"development",
           entry:'./src/index.js',
           output:{
               filename:'build.js',
               path:path.resolve(__dirname,'./dist')
           },
           devServer:{
               hot:true
           },
           module:{
               rules:[
                   {
                       test:/\.vue$/,
                       use:[
                            {
                               loader:'vue-loader'
                           }
                       ]
                   },
               ]
           },
           plugins:[
               new HtmlwebpackPlugin({
                   title:'aweiapp',
                   template:'./index.html'
               }),
               new VueLoaderPlugin()
           ]
       }
      

    • HMR原理

      1.webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）

      

示例代码

    https://gitee.com/weiLZ598/webpack-study.git