开启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