webpacke4 模板以及踩坑指南

模板仓库

https://github.com/AmberAAA/webpack-template

第一版 scss、webpack-dev-server

https://github.com/AmberAAA/webpack-template

第二版 依赖分离，添加hash

在这一版本中，主要将代码与依赖分离，通过hash化后的文件，无论时采用cdn还是mainfest进行离线缓存，都有非常不错的性能。

踩坑实录

1. 使用mini-css-extract-plugin代替extract-text-webpack-plugin提取css代码
2. 通过将css, js的hush设置为contenthash，来避免css改变导致js的hash改变，或者js改变导致css的hash改变

正确的解决方案
https://cnodejs.org/topic/5b5ae15a2860af042a21791b

第三版 添加editorconfig与eslint

在这一版本中，并未修改webpack的配置文件，而是添加了eslint与editorconfig来管理代码风格。

第四版 开发与生产隔离

问题

在实际项目中操作发现，如果直接将webpack-dev-server配置到生产模式。会带来一下几个问题。

1. 代码变更后，热更新缓慢。
2. 丢失debugger断点，不利于开发调试。
3. 错误堆栈无法重现

我们可以通过一下代码复现此问题，默认项目中已经引用d3模块。并新建/src/demo.js文件。

/* /src/demo.js */
import * as d3 from "d3";

export function demo () {
	// 注意：这里我们故意写了错误的方法名称`arrt`,应为`attr`
    return d3.select("body").arrt("font-size", "14px");
}

我们在src/index.js文件里引用此方法，并调用。

import { demo } from "./demo";
/* eslint-disable-next-line */
debugger
demo();

chrome报错信息如下图：

代码中设置的debugger断点已经在打包时，被删去。并且因为代码经过混淆压缩，此时已经很难去定位错误位置。

通过sourceMap解决错误栈丢失

通过shouceMap可以快速定位错误位置。

热更新

待续

配置文件注释 —— 最新版

待续