Javascript 网页包+；html加载程序提取链接和脚本

我正在尝试使用Webpack从多个EJS文件条目中提取所有资产和脚本

我成功地提取了所有CSS链接（花了我几天的时间），但从一周开始我就一直在提取脚本

以下是我迄今为止所做的工作：

const getFileEntries = function (arfolder, argx, filelist) {

    arfolder = Array.isArray(arfolder) ? arfolder : [arfolder];
    argx = Array.isArray(argx) ? argx : [argx];
    filelist = filelist || {};
    for (var i = 0; i < arfolder.length; ++i) {
        var f = arfolder[i];
        const files = fs.readdirSync(f);
        for (var j = 0; j < files.length; ++j) {
            var file = files[j];
            if (fs.statSync(path.join(f, file)).isDirectory()) {
                getFileEntries(path.join(f, file), argx, filelist);
            }
            else {
                var match = argx.find(function (x) {
                    const matchesPage = file.match(x);
                    return (matchesPage && Array.isArray(matchesPage) === true);
                });
                if (match) {
                    filelist[path.basename(file)] = path.join(f, file);
                }
            }
        }
    }
    return filelist;
};

const config = {

    entry: getFileEntries.bind(this,
         [
            path.join(__dirname, '/views')
         ],
         [
             /^.*\.ejs$/
         ]),

    output: {
        path: path.resolve(DIST),
        filename: 'js/views/[name].js',
        publicPath: '/'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [ 
                    {
                         loader: 'babel-loader'
                    }
                ]
            },

            {
                test: /\.ejs$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    },
                    {
                        loader: 'extract-loader',
                    },
                    {
                        loader: 'html-loader',
                        options: {
                            attrs: ['img:src', 'link:href', 'script:src']
                        },
                    }]
            },

            {
                test: /\.css$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: 'assets/[name].[hash].[ext]'
                        }
                    },
                    {
                        loader: 'extract-loader',
                        options: {
                            name: 'assets/[name].[hash].[ext]'
                        }
                    },
                    {
                        loader: 'css-loader',
                    },
                ]
            },

            {
                test: /\.(eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'assets/[name].[hash].[ext]'
                }
            },

            {
                test: /\.(png|jpg|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'assets/[name].[hash].[ext]'
                }
            }
        ]
    }
};

嗨

我正在尝试使用Webpack从多个EJS文件条目中提取所有资产和脚本

我成功地提取了css链接的所有资产，但我被脚本卡住了

以下是我迄今为止所做的工作：

const getFileEntries = function (arfolder, argx, filelist) {

    arfolder = Array.isArray(arfolder) ? arfolder : [arfolder];
    argx = Array.isArray(argx) ? argx : [argx];
    filelist = filelist || {};
    for (var i = 0; i < arfolder.length; ++i) {
        var f = arfolder[i];
        const files = fs.readdirSync(f);
        for (var j = 0; j < files.length; ++j) {
            var file = files[j];
            if (fs.statSync(path.join(f, file)).isDirectory()) {
                getFileEntries(path.join(f, file), argx, filelist);
            }
            else {
                var match = argx.find(function (x) {
                    const matchesPage = file.match(x);
                    return (matchesPage && Array.isArray(matchesPage) === true);
                });
                if (match) {
                    filelist[path.basename(file)] = path.join(f, file);
                }
            }
        }
    }
    return filelist;
};

const config = {

    entry: getFileEntries.bind(this,
         [
            path.join(__dirname, '/views')
         ],
         [
             /^.*\.ejs$/
         ]),

    output: {
        path: path.resolve(DIST),
        filename: 'js/views/[name].js',
        publicPath: '/'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [ 
                    {
                         loader: 'babel-loader'
                    }
                ]
            },

            {
                test: /\.ejs$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    },
                    {
                        loader: 'extract-loader',
                    },
                    {
                        loader: 'html-loader',
                        options: {
                            attrs: ['img:src', 'link:href', 'script:src']
                        },
                    }]
            },

            {
                test: /\.css$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: 'assets/[name].[hash].[ext]'
                        }
                    },
                    {
                        loader: 'extract-loader',
                        options: {
                            name: 'assets/[name].[hash].[ext]'
                        }
                    },
                    {
                        loader: 'css-loader',
                    },
                ]
            },

            {
                test: /\.(eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'assets/[name].[hash].[ext]'
                }
            },

            {
                test: /\.(png|jpg|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'assets/[name].[hash].[ext]'
                }
            }
        ]
    }
};

但我总是收到网页错误

在./views/my-page.ejs中出错 模块生成失败：引用错误：未定义窗口

另外，如果我正在清理my-page.js文件，则：

"use strict";

window.$ = window.jQuery = require("jquery");

在构建网页包之后，我将在输出的ejs文件中得到以下内容：

<script type="text/javascript" src="[object Object]"></script>

这是什么？我希望Webpack在输出文件夹中构建一个新的JS文件，然后在src中更新它的路径？这是一个bug还是我没有正确使用加载程序/插件

---

是否有其他人成功地使用Webpack实现了类似的目标？还是我在浪费时间

我读了这篇文章，但没有找到解决问题的办法。我尝试了

externals

+

imports加载程序？这个=>窗口

技巧，但不起作用：（我阅读了问题，但没有找到任何解决问题的方法。我尝试了

externals

+

导入加载程序？这个=>窗口

技巧，但不起作用：(

<script type="text/javascript" src="[object Object]"></script>