未找到模块，需要（'file.hbs'）

Question

我正在尝试在使用这些帖子的项目中使用把手：

https://n8d.at/blog/how-to-use-handlebars-in-sharepoint-framework-projects-spfx/https://n8d.at/blog/first-handlebars-web-part-in-spfx/

在我的 gulp.js 文件中，我有这段代码来扩展 Webpack

build.configureWebpack.mergeConfig({
   additionalConfiguration: (generatedConfiguration)=> {
         generatedConfiguration.module.rules.push( 
            { test: /\.hbs$/, loader: "handlebars-template-loader" } ); 
       return generatedConfiguration; 
    }
    }); 
 build.initialize(gulp); 

我在 config 文件夹下创建了一个名为 copy-static.assets.json 的新文件，其中包含以下代码：

{"includeExtensions": ["hbs"]}

我的模板与 .ts webpart 文件处于同一级别，我像这样引用模板：

var compiled = require('./test.hbs'); 

运行 gulp serve 时出现此错误：

Module not found: Error: Can't resolve './test.hbs' using description file: C:\solutions\mywebpart\package.json . Field 'browser' doesn't contain a valid alias configuration.

知道如何解决这个问题吗？

注意我使用的是 Webpack 2。

Answer 1

试试这个

const loaderRule = {
    "use": [{
    "loader": "handlebars-template-loader"
    }],
    "test": /\.hbs/
};

build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(loaderRule);

    return generatedConfiguration;}
});