背景

Question

背景

我正在尝试使用Aurelia创建项目，使用Webpack2进行捆绑。代码使用TypeScript编写。我使用Yarn来处理NPM依赖项。

我的网页将包含多个核心HTML网页。然后，我们的想法是为这些页面中的每个页面添加一个Aurelia应用程序。

因此，每个页面上的index.html都会有一个<div aurelia-app="some_module">，每个页面都指向一个不同的模块。然后将它们中的每一个都放在它们自己的捆绑中。它们之间的共享代码是单独的捆绑包。

当前配置

我的目录结构如下：

aurelia-webpack/src/monitor/    # main.ts, app.ts, app.html
aurelia-webpack/src/test/       # main.ts, app.ts, app.html

首先，我有这个Webpack配置。我的index.html看起来像这样（{% static来自Django）：

<div aurelia-app="main">
    <p>Loading...</p>
    <script src="{% static "aurelia-webpack/dist/app.js" %}"></script>
</div>

然后我有了这个配置。

webpack.config.js

var path = require('path');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const { optimize: { CommonsChunkPlugin }, ProvidePlugin } = require('webpack');

module.exports = {
    entry: {
        app: ['aurelia-bootstrapper'],
        vendor: ['bluebird', 'jquery', 'bootstrap'],
    },
    output: {
        filename: "[name].js",
        chunkFilename: "[name].js",
        sourceMapFilename: "[name].js.map",
        publicPath: "/dist/",
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [".ts", ".js"],
        modules: [
            "src/monitor",
            "node_modules"
        ].map(x => path.resolve(x))
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ["style-loader", "css-loader"] },
            { test: /\.ts$/, loader: "awesome-typescript-loader" },
            { test: /\.html$/, loader: "html-loader" }
        ]
    },
    plugins: [
        new AureliaPlugin(),
        new ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
    ]
}

结果

这适用于monitor的hello world应用程序。当我使用Webpack构建时，我可以看到：

...
[app] ./src/monitor/app.ts 156 bytes {0} [built]
[app.html] ./src/monitor/app.html 57 bytes {0} [built]
[main] ./src/monitor/main.ts 267 bytes {0} [built]
...

我可以正常加载页面并按预期呈现。

如您所见，我使用aurelia-webpack-plugin以及aurelia-bootstrapper。如果我已正确理解，那么引导程序负责在我的aurelia-app上找到<div>标记，并根据模块名aurelia在main位注入main.ts位我指的是。

我的import { Aurelia, PLATFORM } from 'aurelia-framework'; export function configure(aurelia: Aurelia) { aurelia.use .standardConfiguration() .developmentLogging(); aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app'))); }：

的内容

module

混乱

然而，这两个人正在做一些“神奇”的事情，我很难跟进。

例如，我不明白如何确定main名称。在这种情况下，它是aurelia-bootstrapper，但我从未明确地配置它。这是以某种方式由aurelia-webpack-plugin或entry: { home: "./home.js", about: "./about.js", contact: "./contact.js" }完成的？

在条目上阅读WebPack手册时，它更加清晰： https://webpack.js.org/configuration/entry-context/#entry

简单规则：每个HTML页面一个入口点。 SPA：一个入口点，MPA：多个入口点。

<div aurelia-app="monitor">
    <p>Loading...</p>
    <script src="{% static "aurelia-webpack/dist/monitor.js" %}"></script>
</div>

我想要什么

综上所述，我现在想要的是能够添加更多入口点/模块/应用程序或任何正确的术语。

我希望能够创建两个或更多索引文件：

监视器：

<div aurelia-app="test">
    <p>Loading...</p>
    <script src="{% static "aurelia-webpack/dist/test.js" %}"></script>
</div>

测试：

src/monitor/main.ts

每个都有自己的捆绑/入口点/模块/应用程序，如何使用 Webpack 和 Aurelia 进行配置？

aurelia-webpack-plugin 的用例是否仅限于一个入口点？我已尝试为src/test/main.ts和.cert添加显式条目，但我无法正常使用。

Answer 1

我在 aurelia-webpack github项目中发现了这个问题，该项目解释说这是设计的： https://github.com/jods4/aurelia-webpack-build/issues/35#issuecomment-302657535

摘要是必须为每个入口点使用多个编译。由于webpack的配置是 JavaScript ，因此这些配置可以共享基本配置的大部分设置，然后只需为每个入口点导入这些设置。

有关详细信息和上下文，请参阅问题主题。

作者在上述提示中澄清了这一点：

你是对的，插件API是针对单一入口点而设计的（SPA）第一。通过其他评论的步骤，我认为没有理由多个入口点不起作用，但很难搞清楚在你自己没有深刻理解Aurelia + Webpack +之后插件一起工作。如果这很常见，也许我应该想一想关于为多个入口点添加更简单的支持。（没有现在计划，但为什么不呢？）

Answer 2

只是跟进我的评论如下。以下是我的每个webpack配置中相关部分的一些屏幕截图。

我的信息中心页面 - 由webpack.config.dashboard.js创建的dashboard.js

我的帐户页面 - 由webpack.config.account.js创建的account.js

这在我自己的aspnet核心应用程序中有效，所以我认为没有理由不为任何其他框架。您还可以通过创建vendor.js文件并使用Webpack DLL插件创建应用页面脚本可以引用的清单文件来保持每个“app”特定js文件的亮度。

然而，虽然这有效但我不确定这是实现结果的最佳方式。由于每个“页面”是完全独立的Aurelia应用程序，因此我只能通过使用其他一些浏览器方式来共享状态，例如会话或本地存储。我可以将Aurelia“功能”视为分割应用功能的一种方式 - 有点理由。

与Aurelia + Webpack 2的多个捆绑包

背景

当前配置

结果

混乱

我想要什么

2 个答案: