webpack 把 source-map 放本地调试生产代码,source-map 不上传到生产环境
方法一:
webpack.config.js
const webpack = require('webpack ')
const FilemanagerPlugin = require('filemanager-webpack-plugin')
module.exports = {
devtool: false, // 不在此生成, 使用插件生成 source-map
plugins: [
// 1. source-map 指向一个本地服务器
new webpack.SourceMapDevToolPlugin({
append: `\n//# sourceMappingURL=http://127.0.0.1:8080/[url]`, // 将打包的文件 source-map 指向一个本地服务器
filename: `[file].map`
}),
// 2. 将打包后文件内的 .map 文件剪切到 maps 目录
new FilemanagerPlugin({
events: {
onEnd: {
copy: [
source: './dist/**/*.map',
destination: path.resolve(_dirname, 'maps')
],
delete: ['./dist/*.map']
}
}
})
]
}
配置以上代码后, 如果生产环境出 bug , 就可以直接打开生产环境, 再将本地的 maps 文件开启 8080 端口就可以调试线上代码了!
线上代码
连接到本地 maps
方法二:
不使用 SourceMapDevToolPlugin, 手动在浏览器给文件添加 source-map:
url输入本地开启的 maps 端口: http://127.0.0.1:8080
webpack.config.js
devtool: 'hidden-source-map' // 生成单独的 source-map, 不在打包好的 js 尾部内添加 source-map 指向的 url