为什么我的js文件被加载为`index.html`而不是webpack创建的实际js文件？

Question

我正在使用typescript，jade和stylus从webpack创建一个简单的构建。但是，当最终的index.html文件被吐出时，似乎认为js文件只是index.html文件，而不是webpack捆绑的实际js文件动态插入html body的底部。

我的项目目录结构如下所示：

- dist (compiled/transpiled files)
  - server
    - dependencies
    - index.js
    - app.js
  - app.[hash].js
  - polyfills.[hash].js
- node_modules
- src
  - server
    - dependencies
    - index.ts
    - app.ts
  - client (ng2 ts files)
  - index.jade

这是我的webpack构建：

'use strict';
const webpack = require('webpack');
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
const rootDir = __dirname;
/**
 * Resolve paths so that we don't have to use relative paths when importing dependencies.
 * Very helpful when scaling an application and changing the location of a file that my require another file
 * in the same directory as the one it used to be in
 */
const pathResolves = [path.resolve(rootDir, 'src'), path.resolve(rootDir, 'node_modules')];
console.log('path', path.resolve(rootDir, 'src/server'));
module.exports = {
  entry: {
    'app': path.resolve(rootDir, 'src/client/main.ts'),
    'polyfills': [
      'core-js/es6',
      'core-js/es7/reflect',
      'zone.js/dist/zone'
    ]
  },
  output: {
    path: path.resolve(rootDir, 'dist'),
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.component.ts$/,
        use: [
          {
            loader: 'angular2-template-loader'
          },
          {
            loader: 'ts-loader',
            options: {
              configFileName: path.resolve(rootDir, 'tsconfig.client.json')
            }
          }],
        include: [path.resolve(rootDir, 'src/client')]
      },
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFileName: path.resolve(rootDir, 'tsconfig.client.json')
            }
          }
        ],
        exclude: /\.component.ts$/
      },
      {
        test: /\.jade$/,
        use: ['pug-ng-html-loader']
      },
      {
        test: /\.styl$/,
        use: [
          { loader: 'raw-loader' },
          { loader: 'stylus-loader' }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.ts', '.jade', '.styl'],
    modules: pathResolves
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'polyfills'
    }),
    new HTMLWebpackPlugin({
      template: path.resolve(rootDir, 'dist/index.html')
    }),

    /**
     * Define any environment variables for client
     */
    new webpack.DefinePlugin({
      APP_ENV: JSON.stringify(process.env.APP_ENVIRONMENT || 'development')
    }),
    /**
     * This plugin is required because webpack 2.0 has some issues compiling angular 2.
     * The angular CLI team implemented this quick regexp fix to get around compilation errors
     */
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      './'
    )
  ]
};

最后，这是提供src/server/app.ts的{​​{1}}文件：

index.html

当我转到import * as express from 'express'; import * as fs from 'fs'; import * as morgan from 'morgan'; import { Config } from './dependencies/config'; export function app(Container) { const app = express(); const config: Config = Container.get(Config); if (config.log.dev) { app.use(morgan('combined')); } app.get('/', (req: express.Request, res: express.Response) => { const indexPath: string = `dist/index.html`; const encodeType: string = `utf-8`; const html = fs.readFile(indexPath, encodeType, (err: Error, result: string) => { if (err) { return res.status(500).json(err); } return res.send(result); }); }); return app; }时，浏览器控制台会显示以下404错误消息（在浏览器控制台中显示为红色）：

localhost:3000

我知道应该从GET http://localhost:3000/polyfills.9dcbd04127bb957ccf5e.js GET http://localhost:3000/app.9dcbd04127bb957ccf5e.js 获取js文件，但似乎无法使其与webpack一起使用。另外，我应该注意，我在gulp nodemon配置中将dist/[file].[hash].js设置为NODE_PATH。任何想法为什么这不起作用？

Answer 1

自己想出来。忘了将app.use(express.static('dist'))中间件添加到app.ts文件中。