使用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會為您工作。 您可以將“把手”模板推到更高的級別。 插件可以自動為您編寫所需的參考。