開啟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