Question

简介

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

这应该很容易，所有内容都已在webpack文档中进行了记录。在阅读了文档并尝试了webpack之后，我得出了下面已经可以使用的配置。

问题

当前设置的问题是我想获得 proper 源地图支持，但似乎不起作用。正确的说，我希望当我使用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。在写这篇文章的时候，我想到了一个解决方案。我仍然会发布问题，也许它可以帮助其他人。

Answer 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',

webpack：使用CSS时了解源映射

1 个答案: