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

Write template string to .html file with Webpack

本文关键字:html 文件 字符串 Webpack 使用      更新时间:2023-09-26

我有一个名为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')
    }
]

这样使用,用户。hbs文件被写入user.html文件,但它没有styles变量的东西在里面。

有人有解决这个问题的方法吗?我需要我的HTML文件编译与样式信息从我的scss文件。

也许html-webpack-plugin适合你。您可以将Handlebars模板推到更高的级别。该插件可以自动为您编写所需的引用。