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