如何让 webpack-dev-server 服务于我的 index.html

Question

我正在尝试使用 Webpack 获得一个极其简单的基本 TypeScript 项目设置，但由于某种原因我遇到了难以置信的困难。

我遵循了 this 指南，一切正常。当我简单地运行 webpack 时，我的文件将打包并编译并输出到 dist 目录中。从那里我可以将它们托管在本地服务器上并且一切正常。

但是，我想避免每次进行更改时都必须手动捆绑和编译我的代码，并且我希望每次保存文件时都自动完成此操作。据我所知，这是 Webpack 的常见用途，所以我不确定为什么我很难找到任何有用的信息。

我决定使用 webpack 开发服务器来完成这个，所以我阅读了 this 教程，但我终究找不到任何人解释如何让它也为我的 index.html?当我运行 webpack serve --mode=development 一切顺利时，当我导航到我服务的本地主机端口时，我收到 404 错误。

先前链接页面上的“提示”之一是

If you're having trouble, navigating to the /webpack-dev-server route will show where files are served. For example, http://localhost:9000/webpack-dev-server.

当我导航到 localhost:1234/webpack-dev-server 时，它告诉我它只提供一个文件：bundle.js 显然 JavaScript 单独的文件是行不通的，我需要它还为我的 dist 目录中的 index.html 文件提供服务。

现在，我的知识非常有限，因为这是我第一次使用 Webpack，但这里是我可以提供的所有细节，希望它不是偶然完全无关的：

每当我的开发服务器重新加载自身时（无论何时启动，或者如果在运行ning 期间监视的文件发生更改），它只会更新它正在服务的 bundle.js 文件。它不会更新存储在我硬盘驱动器 dist 目录中的 bundle.js 文件。我怎样才能让它更新两者？

另外，如何让服务器也为我的 index.html 文件提供服务，而不仅仅是 bundle.js？它甚至从哪里得到 bundle.js？是从头开始编译我的所有代码来创建该 js 文件，还是将其从 dist 目录中取出？

此外，我是否完全以错误的方式进行了处理？我的 index.html 应该去哪里？我将我的 TypeScript 文件放入 src 目录，然后将它们转换为 .js 文件并移至我的 dist 目录...我是否也应该将我的 index.html 放入 src 还是它完全属于 dist 或其他地方？当我将 index.html 放入 src 中时，它不会被复制到 dist 中，它只是完全忽略它。如果我的 index.html 文件不属于 src 它必须属于 dist，但如果它属于 dist 那么我怎么能期望开发服务器找到它并且将它与 src 中的其他 TypeScript 文件一起提供？为什么开发服务器不能只提供 dist 中的所有内容并自动编译从 src 到 dist 中的所有内容？我一定是误解了这一切的流程，但我不知道到哪里去寻找解释，而且我已经为此花费了几个小时。

只是对它如何工作的一般解释也将非常有帮助，因为我在任何地方都找不到一篇文章或论坛 post 详细介绍了 Webpack 的所有问题。我一直在尽可能长时间地避免捆绑器和所有这些 NPM 混乱，因为我经常运行遇到这样的问题，但我最终决定加入并解决所有这些混乱，我已经后悔了它。如果有人可以向我（和其他有类似问题的人）指出一些很好的资源来了解正在发生的所有自动魔法，那将是非常感激不尽。 Webpack 文档和指南对新手来说毫无价值。

我的 Webpack 配置文件：

const path = require("path");

module.exports = {
    entry: "./src/index.ts",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    devServer: {
        compress: false,
        static: false,
        client: {
            logging: "warn",
            overlay: {
                errors: true,
                warnings: false
            },
            progress: true
        },
        port: 1234, host: "0.0.0.0"
    }
};

Answer 1

你的入口是在webpack中设置的吗？所以它被包括在内？

    entry: {
      main: 'path/to/index.ts'
    },

您也可以尝试添加到您的 index.ts 文件

require('file-loader?name=[name].[ext]!../index.html');

或

require("./src/index.html");

// Then In your webpack config file add a loader

loaders : {   { test: /\.html/, loader: 'file?name=[name].[ext]' } }

否则你总是可以使用 webpack 复制插件复制这个文件

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

需要运行 npm install --save-dev html-webpack-plugin 才能安装它。以及将您的 index.html 文件移动到您的 src 文件夹

Answer 2

请访问 localhost:1234/bundle（其中 bundle.js 是您的捆绑文件）magichHTML route，这将加载带有捆绑脚本的 HTML 文件。

如何让 webpack-dev-server 服务于我的 index.html

How to make webpack-dev-server serve my index.html

javascript

node.js

typescript

webpack