Question

我有以下项目树

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并没有看到来自某个项目的htmls

/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 config

{
    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',
        }
    }
}

Answer 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
                    }
                }
            }
        ]
    },

http-loader无法包含来自其他项目的html

1 个答案: