使用 html-webpack-plugin 打包 HTML，无需打包任何 JavaScript [英] Pack HTML with html-webpack-plugin without packing any JavaScript

问题描述

在另一个问题中，一个获得 11 票赞成的已接受答案建议使用 webpack 的 html-webpack-plugin代码>合并HTML+JS+CSS.

In another question, an accepted answer with 11 upvotes suggests using webpack's html-webpack-plugin to merge HTML+JS+CSS.

虽然没有一个字，但这是我的问题.我有一个 HTML 格式的文档文件.它包括两个外部 CSS 文件和一个 javascript 文件(语法高亮).我想将它们全部打包成一个 HTML 文件以便于分发.

Not a single word on how though, so that's my question. I have a documentation file, in HTML. It includes two external CSS files and one javascript file (syntax highlighter). I would like to bundle it all into one HTML file for easy distribution.

我尝试使用 webpack 而不使用以下 webpack.config.js 打包任何 JS:

I tried to use webpack without packing any JS with following webpack.config.js:

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


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

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

But that caused an error because webpack requires input and output script path:

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

那我该怎么做.webpack 甚至是正确的选择吗?

So how do I do this. Is webpack even the right choice?

推荐答案

这里的棘手之处在于 webpack 和 HtmlWebpackPlugin 都有自己的入口-输出管道.你不关心 webpack 的入口点和输出；你关心 HtmlWebpackPlugin 的，但是为了让 HtmlWebpackPlugin 运行起来，你必须让 webpack 做它的事情.

What's tricky here is that webpack and HtmlWebpackPlugin each have their own entry-output pipeline. You don't care about webpack's entry point and output; you care about HtmlWebpackPlugin's, but in order for HtmlWebpackPlugin to run at all, you have to let webpack do its thing.

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

There's a clever trick that I stole from https://stackoverflow.com/a/43556756/152891 that you could do here -- tell webpack to output its bundle at index.html, and then tell HtmlWebpackPlugin to output to the same location. Webpack will run first, and then HtmlWebpackPlugin will overwrite its output. You still need to define an entry point for webpack, but this can be a blank 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')
  }
};

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

You can either keep a blank ./src/index.js file in your repo, or you could define a little inline plugin in your webpack.config.js to create the file on run, and add it to your .gitignore.

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

这篇关于使用 html-webpack-plugin 打包 HTML，无需打包任何 JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！