背景
多束我試圖創建一個使用Aurelia一個項目，使用Webpack2進行捆綁銷售。該代碼使用TypeScript編寫。我使用Yarn來處理NPM依賴關係。與奧裏利亞+的WebPack 2
我的網頁將由多個核心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"
})
]
}
結果
這正常工作與Hello World應用程式爲monitor。當我使用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。如果我已經正確地理解了它，引導程序是負責在我的<div>上找到aurelia-app標記並根據我所指的模塊名稱main在那裏注入aurelia位。
我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頁面一個切入點。 SPA：一個入口點，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>
每一個有自己捆綁/入口點/模塊/應用程序，我如何配置這個與Webpack和Aurelia？
對於aurelia-webpack-plugin的用例是否僅限於一個入口點？我試過爲src/monitor/main.ts和src/test/main.ts添加明確的條目，但我沒有得到任何正確的工作。
你有過這樣的事嗎？ – m0ngr31
是的，閱讀我發佈的答案 – Joakim