Webpack开启本地服务器；HMR热模块替换；devServer配置；开发与生成环境的区分与配置

1_开启本地服务器

1.1_开启本地服务器原因

目前开发的代码，为了运行需要有两个操作：

• 操作一：npm run build，编译相关的代码；
• 操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；

这个过程经常操作会影响的开发效率，希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示；
为了完成自动编译，webpack提供了几种可选的方式：

• webpack watch mode；
• webpack-dev-server（常用）；
• webpack-dev-middleware；

1.2_webpack-dev-server

上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的：

• 当然，目前可以在VSCode中使用live-server来完成这样的功能；
• 但是，希望在不适用live-server的情况下，可以具备live reloading（实时重新加载）的功能；

安装webpack-dev-server

npm install webpack-dev-server -D

修改配置文件，启动时加上serve参数：
packjson.js文件中

  "scripts": {
    "build": "webpack --config webpack.config.js",
    "serve": "webpack serve --config webpack.config.js"
  },

webpack.config.js文件中

module.exports = {
  devServer: {
  }
}

webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中。 事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）

2_HMR热模块替换

2.1_认识

什么是HMR？

• HMR的全称是Hot Module Replacement，翻译为模块热替换；
• 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；

HMR通过如下几种方式，来提高开发的速度：

• 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
• 只更新需要变化的内容，节省开发的时间；
• 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

如何使用HMR呢？

• 默认情况下，webpack-dev-server已经支持HMR，只需要开启即可（默认已经开启）；
• 在不开启HMR的情况下，当修改了源代码之后，整个页面会自动刷新，使用的是live reloading；

2.2_开启HMR

修改webpack.config.js配置

module.exports = {
  devServer: {
    hot: true,
  }
}  

浏览器的控制台会出现下面的提示

[HMR] waiting for update signal from wDs.. .
[WDS] Hot Module Replacement enabled.

但是当修改了某一个模块的代码时，依然是刷新的整个页面， 这是因为需要去指定哪些模块发生更新时，进行HMR；

// 指定哪一个模块需要HMR
if (module.hot) {
  module.hot.accept("./utils/demo.js", () => {
    console.log("demo模块发生了更新")
  })
}

2.3_框架的HMR

有一个问题：在开发其他项目时，是否需要经常手动去写入 module.hot.accpet相关的API呢？比如开发Vue、React项目，修改了组件，希望进行热更新，这个时候应该如何去操作呢？

事实上社区已经针对这些有很成熟的解决方案了：

• 比如vue开发中，使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验；
• 比如react开发中，有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成使用react-refresh）；

3_devServer配置

3.1_host配置

host设置主机地址：

• 默认值是localhost；
• 如果希望其他地方也可以访问，可以设置为 0.0.0.0；

localhost 和 0.0.0.0 的区别：

• localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1;
• 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是主机自己发出去的包，直接被自己接收;
  • 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;
  • 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的;
  • 比如监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的;
• 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序。比如监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的

3.2_port、open、compress

port设置监听的端口，默认情况下是8080

open是否打开浏览器：

• 默认值是false，设置为true会打开浏览器；
• 也可以设置为类似于 Google Chrome等值；

compress是否为静态文件开启gzip compression。 默认值是false，可以设置为true；

4_开发与生成环境

4.1_如何区分开发环境

目前所有的webpack配置信息都是放到一个配置文件中的：webpack.config.js

• 当配置越来越多时，这个文件会变得越来越不容易维护；
• 并且某些配置是在开发环境需要使用的，某些配置是在生成环境需要使用的，当然某些配置是在开发和生成环境都会使用的；
• 所以，最好对配置进行划分，方便维护和管理；

那么，在启动时如何可以区分不同的配置呢？

• 方案一：编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可；
• 方式二：使用相同的一个入口配置文件，通过设置参数来区分它们；

packjson.js的关键代码如下

  "scripts": {
    "build": "webpack --config ./config/webpack.prod.config.js",
    "serve": "webpack serve --config ./config/webpack.dev.config.js"
  }

4.2_入口文件解析

之前编写入口文件的规则是这样的： ./src/index.js，但是如果的配置文件所在的位置变成了 config 目录，是否应该变成 …/src/index.js呢？

• 如果这样编写，会发现是报错的，依然要写成 ./src/index.js；
• 这是因为入口文件其实是和另一个属性时有关的 context；

context的作用是用于解析入口（entry point）和加载器（loader）：

• 官方说法：默认是当前路径（但是经过测试，默认应该是webpack的启动目录）
• 另外推荐在配置中传入一个值；

const path = require("path")
module.exports = {
  context: path.resolve(__dirname,"./")  //context是配置文件所在目录
  entry: "../src/index.js",  //或者main./src/main.js"
}

const path = require("path")
module.exports = {
  context: path.resolve(__dirname,"../")  //context是上一个目录
  entry: "./src/index.js",  //或者main./src/main.js"
}

4.3_区分开发和生成环境配置

创建三个文件：

• webpack.comm.config.js
• webpack.dev.config.js
• webpack.prod.config.js

在终端输入命令

npm install webpack-merge -D

webpack.dev.config.js

const { merge } = require("webpack-merge")
const commonConfig = require("./webpack.comm.config")

module.exports = merge(commonConfig, {
  mode: "development",
  devServer: {
    hot: true,
    // host: "0.0.0.0",
    // port: 8888,
    // open: true
    // compress: true
  }
})

webpack.prod.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const { merge } = require("webpack-merge")
const commonConfig = require("./webpack.comm.config")

module.exports = merge(commonConfig, {
  mode: "production",
  output: {
    clean: true
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
})

webpack.comm.config.js

const path = require("path")
const { VueLoaderPlugin } = require("vue-loader/dist/index")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require("webpack")

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "../build")
  },
  resolve: {
    extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
    alias: {
      utils: path.resolve(__dirname, "../src/utils")
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ "style-loader", "css-loader", "postcss-loader" ]
      },
      {
        test: /\.less$/,
        use: [ "style-loader", "css-loader", "less-loader", "postcss-loader" ]
      },
      {
        test: /\.(png|jpe?g|svg|gif)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 60 * 1024
          }
        },
        generator: {
          filename: "img/[name]_[hash:8][ext]"
        }
      },
      {
        test: /\.js$/,
        use: [
          { 
            loader: "babel-loader"
          }
        ]
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: 测试项目",
      template: "./index.html"
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      coderwhy: "'why'",
      counter: "123"
    })
  ]
}