javascript - 使用 webpack 生成的类名渲染静态 html

Question

我正在尝试让 Webpack 呈现静态 html 并导出相关的 css，从哈巴狗模板和使用 HtmlWebpackPlugin 的 css 模块开始。
我的设置如下

//webpack.config.js

...

plugins: [
    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin({
        template: "src/templates/index.pug",
        excludeChunks: ["landing", "runtime"],
        excludeAssets: [/index.*.js/]
    })

    new HtmlWebpackExcludeAssetsPlugin(),

    new MiniCssExtractPlugin({
        filename: "[name].[contenthash].css",
        chunkFilename: "[name].[contenthash].css"
    })
]
module: {
    rules: [
        /**
         * pug
         */
        {
            test: /\.pug$/,
            exclude: /node_modules/,
            use: ["pug-loader"]
        },

        /**
         * scss
         */
        {
            test: /\.scss$/,
            exclude: /node_modules|_.+.scss/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: process.env.NODE_ENV === "development"
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true,
                        localsConvention: "camelCase",
                        sourceMap: true
                    }
                },
                "postcss-loader",
                "sass-loader"
            ]
        }
    ]
}

...

然后在我的 index.pug 文件中我想做这样的事情:

- var styles = require("../styles/style.module.scss")

div(class=styles.someClass)

问题是，如果我按原样保留配置，我会得到

ERROR in ./src/styles/style.module.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[MODULE_TYPE] is not a function

我成功地通过以下方式在 pug 模板中正确获取了转换后的类名

/**
 * scss
 */
{
    test: /\.scss$/,
    exclude: /node_modules|_.+.scss/,
    use: [
        //{
        //    loader: MiniCssExtractPlugin.loader,
        //    options: {
        //        hmr: process.env.NODE_ENV === "development"
        //    }
        //},
        {
            loader: "css-loader",
            options: {
                modules: true,
                localsConvention: "camelCase",
                sourceMap: true,
                onlyLocals: true <=====
            }
        },
        "postcss-loader",
        "sass-loader"
    ]
}

但是通过从链中删除 MiniCssExtractLoader，我显然没有得到导出的 css 文件。
通过设置 onlyLocals: true，pug 中的类按预期工作，因为 css-loader 导出映射。 如果我从 pug 模板中删除 - var styles = require("../styles/style.module.scss") 并将 MiniCssExtractPlugin 留在加载器链中，我得到相反的结果:css 文件，但没有映射。

有什么想法吗？有没有办法导出 css 文件并直接在 pug 模板中取回映射？

附言 我也从 pug-loader 的 GitHub 页面上看到了这个例子

var template = require("pug-loader!./file.pug");
// => returns file.pug content as template function

// or, if you've bound .pug to pug-loader
var template = require("./file.pug");

var locals = { /* ... */ };

var html = template(locals);
// => the rendered HTML

原以为 template(locals) 会将局部变量注入(inject)到模板中，但我可能误解了，因为返回的 html 没有更改类的名称，因此问题仍然存在。

Answer 1

刚发现，只需要内联 pug 模板中应用的加载器

- var styles = require("!css-loader?modules&onlyLocals&localsConvention=camelCase!postcss-loader!sass-loader!../styles/style.module.scss")

并具有导出css文件的Webpack配置

entry: {
    index: ["./src/styles/style.module.scss"]
},
module: {
    rules: [
        /**
        * scss
        */
        {
            test: /\.scss$/,
            exclude: /node_modules|_.+.scss/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: process.env.NODE_ENV === "development"
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                },
                "postcss-loader",
                "sass-loader"
            ]
        }
    ]
},

如果有人知道使用源映射的更好解决方案，请发布。