1、devtool:

1、設(shè)置sourcemap： 源碼與bundle文件的關(guān)系映射文件。開發(fā)模式中常用，可以我們查找到源文件，快速定位bug。
2、設(shè)置inline-source-map：刪除.map文件，把map文件寫入到bundle文件中，再對(duì)應(yīng)bundle文件的最后一行。
3、設(shè)置inline-cheap-source-map：只輸出的錯(cuò)誤信息只精確到行數(shù)，不精確到列數(shù)。
4、設(shè)置inline-cheap-moudule-source-map: 打印第三方模塊的錯(cuò)誤信息。
5、hidden-source-map: 用在生產(chǎn)上需要查看錯(cuò)誤信息，但是又不想暴露源碼。
webpack-dev-server:
npm install webpack-dev-server -D
package.json配置：

image.png

2、webpack-dev-server

默認(rèn)webpack-dev-server會(huì)進(jìn)行熱更新，即項(xiàng)目文件發(fā)生了修改，會(huì)自動(dòng)進(jìn)行打包。會(huì)將打包的文件放入到本地。默認(rèn)端口8080
一些配置情況如下：

devServer: {
    contentBase: "./dist", // 輸出位置
    open: true, // 項(xiàng)目開啟時(shí)是否默認(rèn)打開流浪器網(wǎng)址
    port: 8081, // 端口
    proxy: { // 本地代理
      "/api": {
        target: "http://localhost:9092",
      },
    },
  },

3、Hot Module Replacement (HMR:熱模塊替換)：就是當(dāng)修改某個(gè)模塊時(shí)，模塊刷新，但是瀏覽器不刷新。

css模塊HMR
啟動(dòng)hmr

devServer: {
 contentBase: "./dist",
 open: true,
 hot:true,
 //即便HMR不?效，瀏覽器也不?動(dòng)刷新，就開啟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來(lái)觀察模塊更新 從?更新
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會(huì)監(jiān)聽項(xiàng)目的模塊，每個(gè)模塊都有唯一的id作為標(biāo)識(shí)。當(dāng)某個(gè)模塊的內(nèi)容發(fā)生變化了，通過(guò)模塊id查找到對(duì)應(yīng)的模塊，然后進(jìn)行刪除后重建模塊。