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查找到对应的模块，然后进行删除后重建模块。
