http-loader 无法包含来自另一个项目的 html答案

【问题标题】：http-loader fails to include html from another projecthttp-loader 无法包含来自另一个项目的 html
【发布时间】：2018-05-11 07:00:08
【问题描述】：

我有以下项目树

some-project
   some-project.component.ts
   some-project.html
   index.ts
   webpack.conf.js


another-project
    another-project.component.ts
    anpther-project.html
    index.ts
    webpack.conf.js

我正在从另一个项目运行 webpack，并且某个项目被导入另一个项目。但看起来来自 antoher-project 的 html-loader 看不到来自 some-project 的 html

/some-project.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

如何处理这个问题？

这是另一个项目的配置 tsconfig.json

{
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true,
    "transpileOnly": false
  },
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": [
      "dom",
      "es2015"
    ],
    "types" : [
      "jquery",
      "jasmine",
      "angular-mocks",
      "angular-animate",
      "node"
    ],
    "typeRoots": [
      "node_modules/@types",
      "./node_modules",
      "./typings/global.d.ts"      
    ]
  },
  "files": [
    "src/index.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack 配置

{
    devtool: 'inline-source-map',
    entry: sourcePath + '/index.ts',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    externals: {
        "angular": "angular"
    },
    module: {
        rules: [{
                test: /\.ts$/,
                include: path.resolve('../../some-project/src'),
                exclude: /node_modules/,
                use: [
                    'awesome-typescript-loader'            
                ]
            },
            {
                test: /\.(html)$/,
                include: path.resolve('./src'),
                use: {
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        collapseWhitespace: true
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
        modules: [
            path.resolve('./node_modules'),
            sourcePath
        ]
    },

    plugins:
    [
        new webpack.NamedModulesPlugin()
    ],

    stats: {
        colors: {
            green: '\u001b[32m',
        }
    }
}

【问题讨论】：

两个项目的节点依赖都安装了吗？因为错误就像您没有包含 html 插件一样。无论如何，你能展示你的 webpack.config.js 内容吗？也许您正在设置根/上下文属性。如果没有，可能是您正在设置 tsconfig.json rootDir 属性。
我已经添加了配置，您可以看看吗？
看起来这可能与 angular 松散相关，而不是 angularjs，但这似乎不是 angular 可以解决的问题...
有道理。我刚刚从标签列表中删除了 angularjs

标签： typescript webpack-html-loader

【解决方案1】：

所以我解决了这个问题。我必须将正确的路径传递给 html-loader

const includePaths = [
    fs.realpathSync(__dirname + '/src'),
    fs.realpathSync('../../some-project/src')
];

    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: [
                    'awesome-typescript-loader'            
                ]
            },
            {
                test: /\.(html)$/,
                include: includePaths,
                use: {
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        collapseWhitespace: true
                    }
                }
            }
        ]
    },

【讨论】：