文章目录
  1. 1. devtool
    1. 1.1. 关于source map
    2. 1.2. devtool选项
    3. 1.3. 开发环境添加source map
    4. 1.4. 生产环境source map
    5. 1.5. 代码压缩
  2. 2. 结束语

最近项目中需要搭建一个多页面的环境,包括本地路由服务和分页面打包。
本节介绍开发部署和生产环境打包时,启用source map相关配置。

devtool


此选项控制是否生成,以及如何生成source map

关于source map

当webpack打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。
例如,如果将多个源文件打包到一个文件中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到该文件。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。

为了更容易地追踪错误和警告,JavaScript提供了source map功能,将编译后的代码映射回原始源代码。

devtool选项

对于开发环境,通常希望更快速的Source Map,需要添加到bundle中以增加体积为代价。
但是对于生产环境,则希望更精准的Source Map,需要从bundle中分离并独立存在。

  • 开发环境

    • eval
      • 每个模块都使用eval()执行,并且都有//@ sourceURL
      • 此选项会相当快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码,所以不能正确的显示显示行数。
    • inline-source-map
      • SourceMap转换为DataUrl后添加到bundle中。
    • eval-source-map
      • 每个模块使用eval()执行,并且SourceMap转换为DataUrl后添加到eval()中。
      • 初始化SourceMap时比较慢,但是会在重构建时提供很快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。
    • cheap-eval-source-map
      • eval-source-map类似,每个模块都使用eval()执行。
      • 使用此选项,Source Map将传递给eval()作为Data URL调用。它是“低性能开销”的,因为它没有映射到列,只映射到行数。
    • cheap-module-eval-source-map(推荐使用)
      • cheap-eval-source-map类似,然而,在这种情况下,loader能够处理映射以获得更好的结果。
  • 生产环境

    • source-map
      • 生成完整的SourceMap,输出为独立文件。
      • 由于在bundle中添加了引用注释,所以开发工具知道在哪里去找到SourceMap
    • hidden-source-map
      • source-map相同,但是没有在bundle中添加引用注释。
      • 如果你只想要SourceMap映射错误报告中的错误堆栈跟踪信息,但不希望将SourceMap暴露给浏览器开发工具。
    • cheap-source-map
      • 不带列映射(column-map)的SourceMap,忽略加载的Source Map
    • cheap-module-source-map
      • 不带列映射(column-map)的SourceMap,将加载的Source Map简化为每行单独映射。
    • nosources-source-map
      • 创建一个没有sourcesContentSourceMap
      • 它可以用来映射客户端上的堆栈跟踪,而不会暴露所有的源码。

参考开发辅助调试工具(Devtool)

开发环境添加source map

这里我们简单地添加devtool

1
2
// build/dev-server.js
webpackConfig.devtool = 'eval-cheap-module-source-map'

同时,在配置文件中,还有一个要点是publicPath不是/这样的值,而是http://localhost:3000/这样的绝对地址。这是因为,在使用?sourceMap的时候,style-loader会把css的引入做成这样:

1
<link rel="stylesheet" href="blob:http://localhost:3000/asdasd" />

这种blob的形式可能会使得css里的url()引用的图片失效,因此建议用带http的绝对地址(这也只有开发环境会用到)。

所以我们有:

1
2
3
4
5
6
7
8
9
10
11
// webpack-dev-server中间件
app.use(WebpackDevMiddleware(compiler, {
publicPath: 'http://localhost:3000/',
stats: {
colors: true,
chunks: false
},
progress: true,
inline: true,
hot: true
}))

生产环境source map

同样的我们添加devtool

1
2
3
4
// build/dev-server.js
webpackConfig.devtool = 'source-map'
// 或者不需要source map
webpackConfig.devtool = false

生产环境很多时候我们会压缩代码,压缩的时候如果需要生成source map还需要配置:

1
2
3
4
5
6
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true
})
// ...
]

参考了《Express结合Webpack的全栈自动刷新》

代码压缩

既然说到UglifyJsPlugin了,就顺便讲一下代码压缩吧。

其实也没有多少东西,就是上面大家看到的new webpack.optimize.UglifyJsPlugin(),不过配置选项除了sourceMap还有注释comments相关、压缩compress相关。

还有一个问题就是,UglifyJs不支持ES6的压缩,如果代码压缩前没有编译到ES5,则打包任务会报错,通常显示:

1
2
ERROR in xx/xxxxx.js from UglifyJs
Unexpected token xxxx

这时候我们需要将代码先通过babel生成ES5,然后再压缩:

1
2
3
4
5
6
7
8
9
10
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
// 其他loader排在后面
]
}

大致就酱啦。

结束语


本节我们大致了解了source map的功能和一些devtool的选项,包括生产环境和开发环境可能需要注意的地方,以及简单说了个代码压缩的坑。
可参考代码github-vue-multi-pages,主要是这套环境使用在vue上的demo。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. devtool
    1. 1.1. 关于source map
    2. 1.2. devtool选项
    3. 1.3. 开发环境添加source map
    4. 1.4. 生产环境source map
    5. 1.5. 代码压缩
  2. 2. 结束语