我无法使用handlebars引擎将js脚本连接到我的html文件（我使用webpack）

Question

当我将脚本标签粘贴到使用

html-buldler-webpack-plugin

收集的 html 文件时，出现错误：

"TypeError: Found non-callable @@iterator".

这是我的webpack.config：

const path = require('path')
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './src/js/main.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'build'),
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ],
    },
    plugins: [
        new HtmlBundlerPlugin({
            entry: {
                index: {
                    import: path.resolve(__dirname, 'src', 'index.html'),
                    // in data.js file I stored some data for handlebars template
                    data: path.resolve(__dirname, 'src', 'js', 'data.js'),
                },
            },
            preprocessor: 'handlebars',
            preprocessorOptions: {
                partials: ['src/partials'],
                helpers: {
                    arraySize: (array) => array.length,
                },
            },
        }),
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, 'build')
        },
        compress: true,
        port: 3000,
        hot: true,
    },
}

启动 webpack 构建后，我期望在捆绑目录中包含连接了 javascipt 的 Html 文件。现在我只有 html 文件，没有连接的 js 和捆绑的 js 文件，它们没有连接到任何地方。

Answer 1

您可以尝试

HtmlWebpackPlugin

。 做，

npm install -D html-webpack-plugin

然后在您的

webpack.config.js

文件中，将其设置为插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build'),
    clean: true,
},
  plugins: [new HtmlWebpackPlugin({
    template: "src/index.html", //path to your HTML file
  })],
};

它将使用您的 html 文件作为模板来生成构建 html 文件，并自动在其中注入

main.js

。

使用此链接获取

HtmlWebpackPlugin

文档 - https://github.com/jantimon/html-webpack-plugin