|
|
|
|
@ -25,3 +25,44 @@ configureWebpack: (config) => {
|
|
|
|
|
config.devtool = 'source-map'
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## webpack开发环境开启source-map,生产环境关闭source-map
|
|
|
|
|
```javascript
|
|
|
|
|
// 方式一
|
|
|
|
|
devtool: process.env.NODE_ENV === 'development' ? 'source-map' : false
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
// 方式二, 首先productionSourceMap配置优先级高于devtool配置,所以生产环境关闭sourceMap,开发环境开启sourceMap
|
|
|
|
|
module.exports = {
|
|
|
|
|
// 生产环境是否生成sourceMap
|
|
|
|
|
productionSourceMap: false,
|
|
|
|
|
configureWebpack: {
|
|
|
|
|
// 是否开启sourceMap
|
|
|
|
|
devtool: 'source-map'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## vite中关于source-map的配置
|
|
|
|
|
Vite 通过 vite.config.js 文件中的 build.sourcemap 选项来控制 Source Map 的生成。最关键的一点是:Vite 允许我们为开发环境 (serve) 和生产环境 (build) 单独设置不同的 Source Map 策略。
|
|
|
|
|
核心配置选项
|
|
|
|
|
配置位于 vite.config.js 的 defineConfig 中。
|
|
|
|
|
```javascript
|
|
|
|
|
// vite.config.js
|
|
|
|
|
import { defineConfig } from 'vite'
|
|
|
|
|
|
|
|
|
|
export default defineConfig({
|
|
|
|
|
// ... 其他配置
|
|
|
|
|
build: {
|
|
|
|
|
// 生产环境的 sourcemap 配置
|
|
|
|
|
sourcemap: true, // 也可以是 'inline', 'hidden' 等
|
|
|
|
|
},
|
|
|
|
|
esbuild: {
|
|
|
|
|
// vite开发服务器默认使用 esbuild,并且默认打开sourcemap, 所以不需要配置
|
|
|
|
|
// 也可以在这里配置 ESBuild 的 sourcemap(影响开发时的构建)
|
|
|
|
|
sourcemap: true,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|