css.sourceMap
- Type:
boolean
- Default:
false
用途
设置是否开启 css 的 sourse map
功能。css 的 sourse map
作用类似与 js 的 sourse map
。
注意:开启可能会影响构建性能。
用法
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist' // 输出文件目录
// css相关配置
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: true // 开启 CSS source maps?
}
}
拓展
下面是开启和关闭 css sourse map
后,在Chrome DevTools 的展示效果。
-
关闭:
下面是同时关闭
css.extract
和css.sourceMap
的效果:
下面是关闭css.sourceMap
但开启css.extract
的效果:
-
开启:
下面是关闭
css.extract
但开启css.sourceMap
的效果:
下面是开启css.extract
和css.sourceMap
的效果:
由上面我们可以得出两个结论:
-
通过
css.sourceMap
,我们可以明确的指导css代码在项目文件中的位置。 -
如果开启
css.extract
,那么css.sourceMap
效果就似乎是失效了。表面上看确实如此。但实际上css.sourceMap
还是发挥了作用。为什么这么说呢?
很简单,因为
css.extract
的作用是分离组件中css,然后生成独立的文件,而这个css 文件是被压缩过的。直接看图:
可见,打包生成的 css 文件就只用一行代码。那么控制台显示app.b1723ec1.css:1
也就没错了。
继续证明:
我对app.b1723ec1.css
做了如下优化:
将#app
移到了第十行
然后控制台的效果如下:
从这就可以证明css.sourceMap
确实是有效的。
不过呢!虽然css.sourceMap
是生效了。但是,当css.extract
和css.sourceMap
时等同没用开启 css.sourceMap。所以,在使用css.sourceMap
时,我们最好关闭css.extract
。