webpack 中css如何调试？

Question

1、在项目中用webpack通过extract-text-webpack-plugin把css合并并抽成单独的样式文件
2、问题：我页面中引用了index.css和base.css，然后合并后的样式文件叫app.css，比如页面上有一个元素是.className，这个样式写在index.css里，但是在调试的时候在浏览器中看到是总是app.css，如何配置wepbakc才能使其看到的是合并前的样式文件？

Answer 1

开发的时候不合并不就行了

Answer 2

给你个关键字sourcemap

Answer 3

配置devtool关键字以下是它的选项

• source-map：会在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；

• cheap-module-source-map：在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；

• eval-source-map：使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；

• cheap-module-eval-source-map：这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

Answer 4

我也有这个问题，压缩到一个style中，无法调试了