如何使用 webpack 保持应用程序文件夹结构

Question

我正在使用 aurelia 和 webpack 开发一个应用程序。 （我对这两种工具都很陌生）。

aurelia app的文件夹结构是：

src/
    app/
            app.html
            app.js
    page1/
            page1.html
            page1.js
    page2/
            page2.html
            page2.js

webpack 配置目前是 aurelia 默认生成的。

    entry: {
    app: [
        // Uncomment next line if you need to support IE11
        // 'promise-polyfill/src/polyfill',
        'aurelia-bootstrapper'
    ]
},
mode: production ? 'production' : 'development',
output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production
        ? '[name].[chunkhash].bundle.js'
        : '[name].[hash].bundle.js',
    sourceMapFilename: production
        ? '[name].[chunkhash].bundle.map'
        : '[name].[hash].bundle.map',
    chunkFilename: production
        ? '[name].[chunkhash].chunk.js'
        : '[name].[hash].chunk.js'
},

结果是一个包含供应商和应用程序块和捆绑文件的 dist 文件夹。

我希望能够将 webpack 输出安排到相同的文件夹结构中

src/
    app/
            app.bundle.map
            app.chunk.js
    page1/
            page1.bundle.map
            page1.chunk.js
    page2/
            page2.bundle.map
            page2.chunk.js

这种结构的原因是让我可以独立开发和部署模块。

任何帮助和指导将不胜感激！

Answer 1

我不确定我是否完全理解了您的需求...但是如果您想保留源代码文件夹的结构，此链接可能会帮助您设置许多不同的条目：

https://dev.to/bbenefield89/webpack-how-to-create-dynamic-entry-output-paths-1oc9

如果您使用汇总而不是捆绑文件，那么一个易于设置的插件是这个： https://www.npmjs.com/package/rollup-plugin-multi-input