Webpack 自定义加载器似乎无法正常工作（对于 haml-haml-loader）

Question

对运行我自己的 Angular 应用程序还很陌生。我正在使用 to set up haml loading through webpack, but it's very old and ngx doesn't support eject anymore, so I'm trying with this package 进行一些自定义 webpack 配置。

我在编译时遇到这个错误：

ERROR in Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> %header
|   test

这是我的 angular.json 中与自定义 webpack 相关的部分：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js",
          "mergeStrategies": {
            "externals": "replace"
          }
        },

还有额外的-webpack.config.js:

const path = require('path');

module.exports = {
    module: {
      rules: [
        { test: /\.haml$/, loader: 'haml-haml' }
      ]
    }
};

编辑：不确定如何为此设置 fiddle 或 stackblitz，但我有一个重现问题的新回购协议：https://github.com/jugglervr/haml-test

Answer 1

问题是您没有设置包 @angular-builders/dev-server 来为您的应用提供服务。这是让它再次工作的步骤：

安装它：

npm i -D @angular-builders/dev-server

同样在 angular.json 中，将 build 属性的值从 @angular-devkit/build-angular:dev-server 替换为 @angular-builders/custom-webpack:dev-server under serve区块：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
}

最后说明：看起来 webpack 不再允许省略 loader 因为我们指定了我们的加载器，所以在你的 webpack 配置中附加加载器：

{ test: /\.haml$/, loader: 'haml-haml-loader' }

Webpack 自定义加载器似乎无法正常工作（对于 haml-haml-loader）

Webpack custom loader doesn't seem to be working (for haml-haml-loader)

angular

webpack

haml