Webpack自定义加载程序似乎不起作用对于haml-haml-loader

问题描述

运行我自己的Angular应用程序很新。我正在使用this guide来设置通过webpack的haml加载，但是它已经很老了，ngx不再支持弹出，因此我尝试使用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"
          }
        },

还有extra-webpack.config.js：

const path = require('path');

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

编辑：不确定如何为此设置小提琴或堆叠炸弹，但我有一个新的仓库来复制问题：https://github.com/jugglervr/haml-test

解决方法

问题是您错过了设置软件包@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：

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

最后的提示：当我们指定加载程序时，webpack似乎不再允许省略loader，因此请将加载程序附加到您的webpack配置中：

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