Question

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

我成功提取了所有CSS链接（我花了几天时间）但是我从一周后就开始提取脚本了。

这是我到目前为止所做的：

您好，

我正在尝试使用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]'
                }
            }
        ]
    }
};

作为测试目的，我创建了一个EJS文件：

<html lang="en">
  <head>
  </head>
  <body>

     <%- include('../partials/header') -%>

      Hellow world !

     <%- include('../partials/footer') -%>

  </body>

    <script type="text/javascript" src="script/pages/my-page.js"></script>

</html>

现在my-page.js的内容：

"use strict";

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

$(document).ready(function () {
    console.log('This is a test');
});

但我总是得到webpack错误

./views/my-page.ejs中的错误模块构建失败：ReferenceError：窗口未定义

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

"use strict";

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

在Webpack构建之后，我在输出的ejs文件中得到了这个：

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

这是什么 src =“[object Object]”？我期待Webpack在输出文件夹中构建一个新的JS文件，然后在src中更新它的路径？这是一个错误还是我没有正确使用loader / plugin？

其他人是否成功使用Webpack来实现类似的功能？或者我在浪费时间？

Webpack + html-loader提取链接和脚本

0 个答案: