背景
私はバンドルのためのWebpack2を使用して、Aureliaを使用してプロジェクトを作成しようとしています。コードはTypeScriptを使って書かれています。私はを使用してNPMの依存関係を処理します。複数のバンドル2
私のウェブページは、複数のコアHTMLページで構成されます。アイデアは、これらのページのそれぞれに1つのAurelia Appを持つことです。
これらの各ページの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のコンフィグを持って開始します。
<div aurelia-app="main">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/app.js" %}"></script>
</div>
その後、私は、この設定を持っている：私のindex.htmlは、この（{% staticものはジャンゴからである）のように見えます。
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世界のアプリで正常に動作します。
...
[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]
...
をそして私はページの罰金を読み込むことができますし、期待どおりにレンダリング：私はWebPACKのを使用してビルドするとき、私はこれを見ることができます。
ご覧のとおり、aurelia-webpack-pluginとaurelia-bootstrapperを使用しています。私がそれを正しく理解していれば、ブートストラップは<div>にaurelia-appタグを見つけ、そこに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で行われますか？
それはたくさん明確であるエントリにWebPACKのマニュアルを読んで： https://webpack.js.org/configuration/entry-context/#entry
単純なルール：HTMLページごとに1つのエントリポイント。 SPA：1つのエントリポイント、MPA：複数のエントリポイント。
entry: {
home: "./home.js",
about: "./about.js",
contact: "./contact.js"
}
は、私は上記のすべてと
を欲しい、私が今欲しいのは正しい用語が何であれ、よりエントリー・ポイント/モジュール/アプリケーションを追加したりすることができることです。
私は2つの以上のインデックスファイルを作成することができるようにしたい：
モニター：
<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>
これらのそれぞれが独自のバンドルを持ちます/ entry point/module/app、これで設定するにはWebpackおよびAurelia？
aurelia-webpack-pluginのユースケースは、何とか1つのエントリポイントに限定されていますか？私はsrc/monitor/main.tsとsrc/test/main.tsの明示的なエントリを追加しようとしましたが、正しく動作するように何も得られません。
あなたはこれを手に入れましたか？ – m0ngr31
はい、投稿した回答を読んでください – Joakim