每个js文件内容的末尾都有//# sourceMappingURL=xxx.js.map

// 例如 dist/dev/mp-weixin/common/vendor.js 文件
...
//# sourceMappingURL=../.sourcemap/mp-weixin/common/vendor.js.map

• 可以看到source map的映射路径差一级目录

现在来写一个webpack插件替换sourceMappingURL即可

const webpack = require('webpack')
class ReplaceSourceMappingURL {
  apply(compiler) {
    const regexp = /\/\/\# sourceMappingURL=(.*).js.map/;
    const replaceStr = '//# sourceMappingURL=../$1.js.map';
    compiler.hooks.thisCompilation.tap('ReplaceSourceMappingURL', (compilation) => {
      compilation.hooks.processAssets.tap(
        {
          name: 'ReplaceSourceMappingURL',
          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE // see below for more stages
        },
        (assets) => {
          for (const filename in assets) {
            if (filename.endsWith('.js')) {
              const source = assets[filename].source().replace(regexp, replaceStr);
              assets[filename] = new webpack.sources.RawSource(source);
            }
          }
        }
      );
    });
  }
}

module.exports = {
  configureWebpack: {
    plugins: [new ReplaceSourceMappingURL()]
  }
};