使用Webpack将模板字符串写入.html文件

Question

我有一个名为user.js的简单入口文件，如下所示：

var styles   = require('../scss/user.scss'),
    template = require('../pages/user.hbs');
    html     = template({ styles: styles });

我想将html的内容写入.html文件。以下是webpack.config.js文件中的加载器：

loaders: [
    {
        test: /\.hbs/,
        loader: 'file?name=[name].html!handlebars-loader'
    },
    {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css?localIdentName='+ (process.env.NODE_ENV == 'prod' ? '__[hash:base64:5]' : '[local]__[hash:base64:5]') +'&sourceMap!autoprefixer?browsers=last 2 versions!sass?outputStyle=expanded')
    }
]

以这种方式使用它，user.hbs文件被写入user.html文件，但它没有styles变量内容。

有没有人有解决方法？我需要使用我的scss文件中的样式信息编译我的HTML文件。

Answer 1

也许html-webpack-plugin会对你有用。您可以将Handlebars模板推到更高的级别。该插件可以自动为您编写所需的参考文献。