自定义 webpack 配置3：增强配置

参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置

1. 自动清理 /dist 文件夹

设置缓存配置后，内容变更后的每次构建都会生成新的文件。但是 webpack 无法追踪到哪些文件是实际在项目中用到的。然后，需要在每次构建前清理 /dist 文件夹。使用插件可以自动完成。

1.1 安装依赖

yarn add clean-webpack-plugin -D

1.2 修改 webpack.prod.js 文件

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.js");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = merge(baseConfig, {
  mode: "production",
  plugins: [new CleanWebpackPlugin(), new OptimizeCssAssetsPlugin()],
});

1.3 重新构建会清空 /dist 目录后，重新生成文件夹

2. 配置 source map

当 webpack 打包源代码时，会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。
为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。

development 模式默认开启，production 模式默认关闭。

2.1 development 模式查看效果

2.1.1 编辑 App.jsx 文件 ，添加代码

  componentDidMount() {
    console1.log("my-webpack-config");
  }

2.1.2 保存代码，自动构建，得到报错，可以明确看出错误来源

App.jsx:47 
Uncaught ReferenceError: console1 is not defined
    at App.componentDidMount (App.jsx:47)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)

2.1.3 编辑 webpack.dev.js 文件