HtmlWebpackPlugin 找不到 index.html，但将其错误输出到它声称找不到的 index.html

Question

我正在尝试将我们的整个构建从 requirejs 和一团糟转换为 webpack，所以我会尽我所能只保留下面的相关细节。

错误，控制台输出来自webpack

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/home/user/Documents/ide/dist/index.html' in '/home/user/Documents/ide':
  Error: Can't resolve '/home/user/Documents/ide/dist/index.html' in '/home/user/Documents/ide'

同样的错误，输出在/home/user/Documents/ide/dist/index.html

Html Webpack Plugin:<pre>
  Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/home/user/Documents/ide/dist/index.html' in '/home/user/Documents/html':
  Error: Can't resolve '/home/user/Documents/ide/dist/index.html' in '/home/user/Documents/ide'

在 webpack 配置下 plugins

new HtmlWebpackPlugin({
            filename: config.build.index,
            template: 'dist/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },

我已确认 config.build.index 的计算结果为 /home/user/Documents/ide/dist/index.html

我不明白，我以为 html 文件是由这个插件生成的，为什么我找不到它找不到的文件？

其他资源建议将 index.html 更改为 index.ejs，这没有任何作用。我也试过绝对路径，这没有用。

以防万一，我的配置（主要是从 vue-webpack cli 构建器中窃取的）：

我的基本配置：

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: './public/js/ide.js'
    },
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
            ? config.build.assetsPublicPath
            : config.dev.assetsPublicPath
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('public/js'),
        },
        modules: ['node_modules']
    },
    module: {
        rules: [
            ...(config.dev.useEslint ? [createLintingRule()] : []),
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('public/js'), resolve('test')]
            },
            { test: /\.hbs$/, loader: "handlebars-loader" },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    },
    node: {

        setImmediate: false,
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
    }
};

它与我正在尝试开始工作的生产配置合并：

const webpackConfig = merge(baseWebpackConfig, {
    module: {
        rules: utils.styleLoaders({
            sourceMap: config.build.productionSourceMap,
            extract: true,
            usePostCSS: true
        })
    },
    devtool: config.build.productionSourceMap ? config.build.devtool : false,
    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: {
                    warnings: false
                }
            },
            sourceMap: config.build.productionSourceMap,
            parallel: true
        }),
        new ExtractTextPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].css'),
            allChunks: false,
        }),
        new OptimizeCSSPlugin({
            cssProcessorOptions: config.build.productionSourceMap
                ? { safe: true, map: { inline: false } }
                : { safe: true }
        }),
        new HtmlWebpackPlugin({
            filename: process.env.NODE_ENV === 'testing'
                ? 'index.html'
                : config.build.index,
            template: 'dist/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.HashedModuleIdsPlugin(),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks(module) {
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0
                )
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'app',
            async: 'vendor-async',
            children: true,
            minChunks: 3
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../static'),
                to: config.build.assetsSubDirectory,
                ignore: ['.*']
            }
        ])
    ]
});

Answer 1

template 指的是您提供给插件的模板 html 文件，而不是输出路径。然后，插件会将捆绑脚本信息注入 template.

的底部