如何使用 Webpack 3、Typescript 和文件加载器加载 index.html 文件？

Question

我尝试通过 file-loader 和 Webpack 3 加载我的 index.html 文件。

我的 webpack.config.ts 看起来像这样：

import * as webpack from 'webpack';

const config: webpack.Configuration = {
    entry: "./src/app.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    devtool: "source-map",

    resolve: {
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".html"]
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader"
            }, {
                test: /\.html$/,
                loader: "file-loader"
            }
        ]
    }
};

export default config;

很遗憾，它没有将我的 src/index.html 文件加载到 dist 文件夹。我究竟做错了什么？如何从 src 文件夹中获取索引文件到 dist 文件夹？

Answer 1

您可以使用 html-webpack-plugin.

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

如何使用 Webpack 3、Typescript 和文件加载器加载 index.html 文件？

How to load an index.html file with Webpack 3, Typescript and file-loader?

typescript

webpack

webpack-file-loader

webpack-3