devtool、devServer、hmr热替换

1、devtool:

1、设置sourcemap： 源码与bundle文件的关系映射文件。开发模式中常用，可以我们查找到源文件，快速定位bug。
2、设置inline-source-map：删除.map文件，把map文件写入到bundle文件中，再对应bundle文件的最后一行。
3、设置inline-cheap-source-map：只输出的错误信息只精确到行数，不精确到列数。
4、设置inline-cheap-moudule-source-map: 打印第三方模块的错误信息。
5、hidden-source-map: 用在生产上需要查看错误信息，但是又不想暴露源码。
webpack-dev-server:
npm install webpack-dev-server -D
package.json配置：

image.png

2、webpack-dev-server

默认webpack-dev-server会进行热更新，即项目文件发生了修改，会自动进行打包。会将打包的文件放入到本地。默认端口8080
一些配置情况如下：

devServer: {
    contentBase: "./dist", // 输出位置
    open: true, // 项目开启时是否默认打开流浪器网址
    port: 8081, // 端口
    proxy: { // 本地代理
      "/api": {
        target: "http://localhost:9092",
      },
    },
  },

3、Hot Module Replacement (HMR:热模块替换)：就是当修改某个模块时，模块刷新，但是浏览器不刷新。

css模块HMR
启动hmr

devServer: {
 contentBase: "./dist",
 open: true,
 hot:true,
 //即便HMR不⽣效，浏览器也不⾃动刷新，就开启hotOnly
 hotOnly:true
 },

配置⽂件头部引⼊webpack

const webpack = require("webpack");

在插件配置处添加：

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
    template: "src/index.html"
    }),
    new webpack.HotModuleReplacementPlugin()
 ],

index.js

import "./css/index.css";
var btn = document.createElement("button");
btn.innerHTML = "新增";
document.body.appendChild(btn);
btn.onclick = function() {
var div = document.createElement("div");
div.innerHTML = "item";
document.body.appendChild(div);
};

index.css

div:nth-of-type(odd) {
background: yellow; }

JS模块HMR
需要使⽤module.hot.accept来观察模块更新 从⽽更新
counter.js

function counter() {
var div = document.createElement("div");
div.setAttribute("id", "counter");
div.innerHTML = 1;
div.onclick = function() {
div.innerHTML = parseInt(div.innerHTML, 10) + 1;
 };
document.body.appendChild(div);
}
export default counter;

number.js

function number() {
var div = document.createElement("div");
div.setAttribute("id", "number");
div.innerHTML = 13000;
document.body.appendChild(div);
}
export default number;

//index.js

import counter from "./counter";
import number from "./number";
counter();
number();
if (module.hot) {
module.hot.accept("./b", function() {
document.body.removeChild(document.getElementById("number"));
number();
 });
}

hmr热更新，webpack loader中有提供，我这里想介绍一下hmr原理。
原理：
webpack会监听项目的模块，每个模块都有唯一的id作为标识。当某个模块的内容发生变化了，通过模块id查找到对应的模块，然后进行删除后重建模块。