webpack 把 source-map 放本地调试生产代码，source-map 不上传到生产环境

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