webpack从0开始搭建react的ts开发环境（11）

本章介绍开启map，sourcemap主要的用途是在调试的时候错误返回的状态是src下的代码状态，另一个用途是生产模式下，用于entry这种监视库，定位错误位置
webpack从0开始搭建react的ts开发环境（10）
demo https://github.com/757566833/webpack-guide

1. 修改webpack.config.ts

...
    mode: 'development',
    devtool: "inline-source-map",
...

2.修改tsconfig.json

...
 // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
...

3.安装插件

yarn add error-overlay-webpack-plugin --dev

4.webpack.config.ts修改

...
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
...
 plugins: [
       new HtmlWebpackPlugin({
            title: "test",
            template: path.resolve(__dirname, "template.html"),
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: "app.css",
            // chunkFilename: "[id].[hash].css",
            // ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
        new ErrorOverlayPlugin()
    ],
...

5.yarn start
webpack从0开始搭建react的ts开发环境（12）