使用webpack生成的类名呈现静态html。

Question

我试图让Webpack呈现一个静态的html并导出相对的css，从使用HtmlWebpackPlugin的pug模板和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-加载程序导出映射。如果我从pug模板中删除- var styles = require("../styles/style.module.scss")，并将MiniCssExtractPlugin留在加载器链中，则会得到相反的结果: css文件，但没有映射。

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

我也从帕格-装载机的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)会将局部变量注入模板，但我可能误解了它，因为返回的html类名称不变，因此问题依然存在。

Answer 1

刚刚发现，它所需要的只是内联在帕格模板中应用的装载机

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

以及具有Webpack配置来导出css文件。

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"
            ]
        }
    ]
},

如果有人知道更好的使用源地图的解决方案，请发布它.