HtmlWebpackPlugin 插件不输出任何内容

Question

我需要缩小 2 个 JS 文件并将其中一个内联到 HTML 模板中。我有以下目录结构：

- src
---- page.html
---- script-to-inline.js
---- script.js
- webpack.config.js

以及以下 webpack 配置：

const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('dotenv-webpack');
const InlineScriptWebpackPlugin = require('dotenv-webpack');

module.exports = {
    context: __dirname,
    mode: 'production',
    entry: {
        script: './src/script.js',
        'script-to-inline': './src/script-to-inline.js',
    },
    output: {
        path: __dirname,
    },
    plugins: [
        new Dotenv(),
        new HtmlWebpackPlugin({
            inlineSource: './src/script-to-inline.js',
            template: './src/page.html',
            filename: 'page.html',
        }),
        new InlineScriptWebpackPlugin({
            names: ['script-to-inline'],
        }),
    ],
};

构建输出如下：

Hash: bb94c50e294f070b4fd1
Version: webpack 4.12.0
Time: 118ms
Built at: 2018-06-20 13:58:48
                      Asset      Size  Chunks             Chunk Names
tracking-script-injector.js  1.24 KiB       0  [emitted]  tracking-script-injector
                tracking.js  1.28 KiB       1  [emitted]  tracking
[0] ./src/tracking-script-injector.js 971 bytes {0} [built]
[1] ./src/tracking.js 630 bytes {1} [built]

看起来 HtmlWebpackPlugin 甚至没有尝试读取我传递给它的选项的模板。

我应该更改什么以使插件处理 page.html 文件？

Answer 1

它不起作用，因为 require 语句没有正确引用插件（这也很奇怪，因为 webpack 没有对你大喊大叫）。

const HtmlWebpackPlugin = require('dotenv-webpack');

应该是：

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

HtmlWebpackPlugin 插件不输出任何内容

HtmlWebpackPlugin plugin doesn't output anything

javascript

webpack

html-webpack-plugin