使用 html-webpack-plugin 打包 HTML 而不打包任何 JavaScript答案

【问题标题】：Pack HTML with html-webpack-plugin without packing any JavaScript使用 html-webpack-plugin 打包 HTML 而不打包任何 JavaScript
【发布时间】：2019-06-11 17:21:55
【问题描述】：

另外一个问题，an accepted answer with 11 upvotes suggests使用webpack的html-webpack-plugin来合并HTML+JS+CSS。

没有一个字关于如何，所以这是我的问题。我有一个 HTML 格式的文档文件。它包括两个外部 CSS 文件和一个 javascript 文件（语法荧光笔）。我想将它们全部捆绑到一个 HTML 文件中以便于分发。

我尝试在不打包任何 JS 的情况下使用 webpack，并使用以下 webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Documentation',
            template: "index.html",
            filename: 'index_bundle.html'
        })
    ]
};

但这导致了一个错误，因为 webpack 需要输入和输出脚本路径：

Error: 'output.filename' is required, either in config file or as --output-filename

那么我该怎么做。 webpack 是否是正确的选择？

【问题讨论】：

当您说合并时，您是否希望将javascript和css行代码注入到html文件中？如果是这样，我认为这不是 html-webpack-plugin 所做的，它只是放置了一个指向生成的 css/js 的脚本/链接标签。如果这就是你需要 webpack 做的全部，那可能是错误的工具
@DerekNguyen 是的，这正是链接问题所要求的，而 webpack 是公认的答案，所以我从那里开始了。

标签： javascript html webpack

【解决方案1】：

这里比较棘手的是 webpack 和 HtmlWebpackPlugin 都有自己的入口-输出管道。你不关心 webpack 的入口点和输出；你关心 HtmlWebpackPlugin 的，但是为了让 HtmlWebpackPlugin 运行，你必须让 webpack 做它的事情。

我从https://stackoverflow.com/a/43556756/152891 窃取了一个聪明的技巧，你可以在这里做——告诉 webpack 在 index.html 输出它的包，然后告诉HtmlWebpackPlugin 输出到相同的位置。 Webpack 将首先运行，然后HtmlWebpackPlugin 将覆盖其输出。你仍然需要为 webpack 定义一个入口点，但这可以是一个空白的 index.js。

webpack.config.js:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: './src/index.js', // Default value, can omit
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html', // Default value, can omit
      inject: false,
      minify: false
    })
  ],
  output: {
    filename: "index.html",
    path: path.resolve(__dirname, 'dist')
  }
};

您可以在您的存储库中保留一个空白的./src/index.js 文件，或者您可以在您的webpack.config.js 中定义一个小内联插件来在运行时创建该文件，并将其添加到您的.gitignore。

  plugins: [
    {
      apply: (compiler) => {
        compiler.hooks.beforeRun.tap('NoOpPlugin', () => {
          fs.writeFileSync('./src/index.js');
        });
      }
    }
  ]

【讨论】：