webpack-dev-server 爬坑：When using the HTML plugin you can omit the output.path-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，webpack-dev-server 是一个非常常用的工具，它可以在本地开发环境中快速构建和调试应用程序。然而，在使用 webpack-dev-server 进行开发时，我们经常会遇到各种问题和坑，其中一个比较常见的问题就是使用 HTML 插件时，可以省略 output.path。

问题描述

在使用 webpack-dev-server 进行开发时，我们通常会使用 HTML 插件来生成 HTML 文件，并将其插入到构建后的 JS 文件中。通常情况下，我们会在 webpack 的配置文件中设置 output.path 选项，用于指定构建后文件的输出路径。然而，在使用 HTML 插件时，有些人会发现，即使没有设置 output.path，HTML 文件也能够正确生成，并正确地插入到 JS 文件中。

这个问题的原因是什么？我们是否可以省略 output.path？

解决方案

首先，让我们来看一下 HTML 插件的配置代码：

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
  // ...
};

在这个配置中，我们可以看到，HTML 插件的配置中并没有 output.path 选项。然而，即使没有设置 output.path，HTML 文件也能够正确生成，并正确地插入到 JS 文件中。这是为什么呢？

原因在于，HTML 插件会将生成的 HTML 文件作为内存中的一个文件来处理，而不是将其写入磁盘。在这种情况下，output.path 选项并不会生效，因为它只控制写入磁盘的文件。

因此，我们可以省略 output.path 选项，并且仍然能够正确地生成 HTML 文件和 JS 文件。

示例代码

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
  devServer: {
    contentBase: './dist',
  },
};

在这个示例代码中，我们可以看到，我们并没有设置 output.path 选项，但是仍然能够正确地生成 HTML 文件和 JS 文件。

总结

在使用 webpack-dev-server 进行开发时，我们可以省略 output.path 选项。这是因为 HTML 插件会将生成的 HTML 文件作为内存中的一个文件来处理，而不是将其写入磁盘。因此，即使没有设置 output.path，HTML 文件也能够正确生成，并正确地插入到 JS 文件中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65814f7ad2f5e1655dc82edf