webpack：在使用 CSS 时理解源映射答案

【问题标题】：webpack: understanding source maps when working with CSSwebpack：在使用 CSS 时理解源映射
【发布时间】：2018-12-22 21:53:35
【问题描述】：

简介

我已经在我的项目中使用webpack 为我的Javascript 文件设置了捆绑。现在我正在将 CSS 文件添加到 webpack 配置中。到目前为止，我已经通过为我依赖的每个 CSS 文件（例如引导程序、我自己的 css 等）添加 <link> 元素，手动将 CSS 文件包含在 HTML 标题中。显然这不是很优雅，使用webpack会更好，所以我想替换链接元素并通过webpack捆绑它们。

这应该很容易，一切都在 webpack 文档中记录了下来。在阅读了文档并使用webpack 进行了一些试验之后，我已经得到了下面已经可以使用的配置。

问题

我当前设置的问题是我想要正确源地图支持，但这似乎不起作用。正确地说，我的意思是我希望当我使用 webpack 运行开发构建并检查 Chrome DevTools 中的某些元素时，我会看到某个 CSS 类源自哪个文件和文件中的哪一行，并且我可以单击 CSS 规则，浏览器会跳转到该文件。

我不想在 head 元素中使用内联样式，因为这样浏览器会显示类似 .foobar { <style>..</style> 的内容，而不是 .foobar { app.css:154。

使用我当前的设置，我将所有 CSS 文件合并（但未缩小）到一个 app.css 文件中。这意味着如果我检查一个引导类，例如.btn，那么它会显示为.btn { app.css:3003。但是，我想要实现的是浏览器将其显示为.btn { bootstrap.css:3003。

所以现在我想了解webpack 和不同的插件（例如css-loader 和min-css-extract-plugin）如何应用CSS 源映射，以及如何配置它们以实现适当的调试体验。

我不确定这有多相关，但是当我在 DevTools 中的 Sources 下导航到 webpack://./bootstrap/dist/css/bootstrap.css 时，我看到它只包含一行： // extracted by mini-css-extract-plugin.

Webpack 设置

index.js：

window.jQuery = require('jquery/dist/jquery');
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap/dist/js/bootstrap');
/* other dependencies */

webpack.config.js：

const devMode = process.env.NODE_ENV !== 'production';

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module: {
    rules: [ 
        { /* Javascript rules excluded */ },
        {
            test: /\.css$/,

            use: [
                {
                    loader: MiniCssExtractPlugin.loader
                },
                {
                    loader: 'css-loader',

                    options: {
                        sourceMap: true
                    }
                }
            ]
        },
        {
            test: /\.(png|svg|jpg|gif)$/,

            use: [
                'file-loader'
            ]
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader'
            ]
        }
plugins: [
    new UglifyJSPlugin (),
    new HtmlWebpackPlugin({
                              template: 'app/index.tpl.html'
                          }),
    new MiniCssExtractPlugin({ filename: devMode ? 
                               '[name].css' :
                               '[name].[hash].css' 
                             })
],

结论

看来我刚刚通过了rubber duck test。在我写这篇文章时，我找到了一个解决方案。我仍然会发布这个问题，也许它可以帮助其他人。

【问题讨论】：

标签： css webpack source-maps webpack-style-loader mini-css-extract-plugin

【解决方案1】：

问题是我也将mini-css-extract-plugin 用于开发，而不仅仅是用于生产。我认为我需要这样做，因为一开始我使用 style-loaded 时，我会在标题中包含样式，并且浏览器会将所有样式显示为 .foobar { <style>..</style>。

但是，实际问题似乎是，我没有使用devtools。因此解决方案是将devtool: devMode ? 'cheap-module-eval-source-map' : 'source-map', 添加到webpack 配置中，以便在开发构建期间有条件地使用style-loader 插件，在生产构建期间有条件地使用mini-css-extract-plugin。

webpack.config.js

        {
            test: /\.css$/,

            use: [
                {
-                   loader: MiniCssExtractPlugin.loader,
+                   loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                },
                {
                    loader: 'css-loader',

                    options: {
                        sourceMap: true
                    }
                }
            ]
        },

  /* ... */

+ devtool: devMode ? 'cheap-module-eval-source-map' : 'source-map',

【讨论】：