Question

我们说我有这样的应用结构

document.location.reload(true);

如何配置webpack以捆绑并输出每个app/ modules/ module1/ <other files> script.js module2/ <other files> script.js module3/ <other files> script.js lib/ <some common/shared scripts to import from> public/ js/（将从公共lib文件夹导入各种库/实用程序）到这样的结构中？

e.g。

script.js

但是没有单独定义每个条目文件？ gulp之类的东西是public/js/module1/script.js public/js/module2/script.js语法吗？

我的目标是每次添加新模块/组件时都不必维护/**/*.js文件。

Answer 1

您需要使用glob包并在entry中设置output和webpack.config.js。根目录中webpack.config.js的示例。

var webpack = require('webpack');
var glob = require('glob');

//Generate object for webpack entry
//rename './app/modules/module1/script.js' -> 'module1/script'
var entryObject = glob.sync('./app/modules/**/script.js').reduce(
    function (entries, entry) {
        var matchForRename = /^\.\/app\/modules\/([\w\d_]+\/script)\.js$/g.exec(entry);

        if (matchForRename !== null && typeof matchForRename[1] !== 'undefined') {
            entries[matchForRename[1]] = entry;
        }

        return entries;
    }, 
    {}
);

module.exports = {
    ...
    entry: entryObject,//{'moduleName/script': './app/modules/moduleName/script.js', ...}
    output: {
        path: __dirname + '/public/js',
        filename: '[name].js'//'moduleName/script.js', [name] - key from entryObject
    }
    ...
};

如果您的错误与“无法解析'fs'”这样的fs添加选项

node: {
    fs: "empty"
}

此外，您可以使用其他entryObject将文件从<other files>捆绑到公共script.js中。

var entryObject = glob.sync('./app/modules/**/*.js').reduce(
    function (entries, entry) {
        var matchForRename = /^\.\/app\/modules\/([\w\d_]+)\/.+\.js$/g.exec(entry);

        if (matchForRename !== null && typeof matchForRename[1] !== 'undefined') {
            var entryName = matchForRename[1] + '/script';

            if (typeof entries[entryName] !== 'undefined') {
                entries[entryName].push(entry);
            } else {
                entries[entryName] = [entry];
            }

        }

        return entries;
    },
    {}
);

Answer 2

您可以使用此代码段并根据需要进行调整

const path = require('path')
const glob = require('glob')

const entries = glob.sync('./src/entry/*').reduce((entries, entry) => {
    const entryName = path.parse(entry).name
    entries[entryName] = entry

    return entries
}, {});

module.exports = {
    entry: entries,
...

'./src/entry/*' - 正则表达式以查找将构建您的条目的文件

const entryName = path.parse(entry).name - 从文件路径中提取文件名

entries[entryName] = entry - 构建条目记录

结果你会得到类似的东西

{
    file1: 'path/to/file1.js',
    file2: 'path/to/file2.js',
    ...
}

webpack中有多个动态入口脚本？

2 个答案: