使用Webpack+Handlebars引擎无法关联JS脚本，添加标签报错

问题描述 #

使用Webpack构建项目，搭配Handlebars模板引擎和html-bundler-webpack-plugin插件时遇到两个问题：

• 构建后生成的HTML未自动关联打包好的JS文件，打包后的JS无任何引用
• 手动在HTML中添加script标签引入JS时，触发错误：TypeError: Found non-callable @@iterator

配置代码 #

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'),
                    // data.js中存储了Handlebars模板用到的数据
                    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,
    },
}

文件结构 #

解决方案 #

1. 让HTML自动关联打包后的JS #

当前配置同时设置了Webpack全局entry和插件自身的entry，导致插件无法识别并关联JS入口。只需调整配置，把JS入口移到插件的entry配置中：

• 移除Webpack全局的entry: './src/js/main.js'配置
• 在插件的index entry的import数组中加入JS文件路径：

new HtmlBundlerPlugin({
    entry: {
        index: {
            import: [
                path.resolve(__dirname, 'src', 'index.html'),
                path.resolve(__dirname, 'src', 'js', 'main.js'), // 添加JS入口
            ],
            data: path.resolve(__dirname, 'src', 'js', 'data.js'),
        },
    },
    // 其他配置保持不变
}),

修改后，插件会自动在生成的HTML中插入正确的script标签，无需手动添加。

2. 解决TypeError: Found non-callable @@iterator错误 #

这个错误大多是因为代码使用了迭代器语法（如for...of、扩展运算符）但Babel未做兼容处理，或代码中尝试遍历非可迭代对象。

方案一：完善Babel配置

修改babel-loader的选项，添加浏览器兼容配置和polyfill支持：

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                ['@babel/preset-env', {
                    targets: "> 0.25%, not dead", // 适配主流活跃浏览器
                    useBuiltIns: 'usage', // 自动按需引入polyfill
                    corejs: 3 // 指定core-js版本，需先安装core-js@3
                }]
            ],
        },
    },
},

执行命令安装依赖：

npm install core-js@3 --save

方案二：检查代码逻辑

排查main.js或data.js中是否存在以下情况：

• 用for...of遍历非数组、非字符串、非Map/Set等不可迭代的对象
• 对非可迭代对象使用扩展运算符（...）
• 手动调用[Symbol.iterator]()但对象未实现该接口

修正这类错误即可解决报错。

内容的提问来源于stack exchange，提问作者Smurf