2

介绍

我已经webpack在我的项目中为我的 Javascript 文件设置了捆绑。现在我正在将 CSS 文件添加到webpack配置中。到目前为止，我一直在通过<link>为我依赖的每个 CSS 文件（例如引导程序、我自己的 css 等）添加元素来手动将 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 源映射，以及如何配置它们以实现适当的调试体验。

我不确定这有多相关，但是当我在 Sources 下的 DevTools 中导航时，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' 
                             })
],

结论

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

4

1 回答 1

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',
于 2018-07-14T21:05:47.593 回答