搭建webpack构建环境(5)-sourcemap

开启sourcemap

webpack.config.js

...

switch(process.env.npm_lifecycle_event) {
  case 'build':
    config = merge(
      common,

      {
        devtool: 'source-map'
      },

      parts.setupCSS(PATHS.app)
    );
  default:
    config = merge(
      common,

      {
        devtool: 'eval-source-map'
      },

      parts.setupCSS(PATHS.app),
      ...
    );
}

module.exports = validate(config);

原文中使用了上面两种模式带列表信息的，但是使用cheap-module-eval-source-map 更快，所以我在开发环境使用cheap-module-eval-source-map,生产环境使用cheap-module-source-map,具体各个模式的区别，网上讲的很多，也很好，这里我就不献丑了.

测试npm run build

如果要改变输出的sourcemap的文件名称

const config = {
  output: {
    // 你可以使用[file], [id], 和 [hash] 取替换.
   //默认的一般已经满足我们的需求
    sourceMapFilename: '[file].map', // Default

   //模版，一般不修改
    devtoolModuleFilenameTemplate: 'webpack:///[resource-path]?[loaders]'
  },
  ...
};

如果你想对source map做更多的控制,可以使用SourceMapDevToolPlugin

下一章

代码压缩

本系列文章参考自surviceJS