Contexte
Je suis en train de créer un projet à l'aide Aurelia, en utilisant Webpack2 pour empaqueter. Le code est écrit en utilisant TypeScript. J'utilise Yarn pour gérer les dépendances NPM.faisceaux multiples avec Aurelia + Webpack 2
Ma page Web est constituée de plusieurs pages HTML principales. L'idée est alors d'avoir une application Aurelia pour chacune de ces pages.
Ainsi, le index.html sur chacune de ces pages aurait un <div aurelia-app="some_module">, chacun faisant référence à un module différent. Chacun d'entre eux sont alors situés dans leur propre faisceau. Le code partagé entre eux est dans des groupes distincts.
config actuelle
Ma structure de répertoire se présente comme suit:
aurelia-webpack/src/monitor/ # main.ts, app.ts, app.html
aurelia-webpack/src/test/ # main.ts, app.ts, app.html
Donc, pour commencer, j'ai cette config Webpack. Mon index.html ressemble à ceci (ce qui se {% static est de Django):
<div aurelia-app="main">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/app.js" %}"></script>
</div>
Puis-je avoir cette config.
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"
})
]
}
Résultat
Cela fonctionne très bien avec une application Bonjour tout le monde pour monitor. Quand je construis à l'aide Webpack je peux voir ceci:
...
[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]
...
Et je peux charger l'amende de la page et il rend comme prévu. Comme vous pouvez le voir, j'utilise aurelia-webpack-plugin ainsi que aurelia-bootstrapper. Si je l'ai bien compris, le bootstrappeur est responsable de trouver l'étiquette aurelia-app sur mon <div> et d'y injecter les bits aurelia, en fonction du nom du module main auquel je fais référence.
Le contenu de mon 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')));
}
Confusion
Cependant, ces deux font des choses "magiques" que j'ai du mal à suivre.
Par exemple, je ne comprends pas comment le nom module est décidé. Dans ce cas, c'est main, mais je ne le configure jamais explicitement. C'est en quelque sorte fait par aurelia-bootstrapper ou le aurelia-webpack-plugin?
Lors de la lecture du manuel WebPack sur l'entrée, il est beaucoup plus claire: https://webpack.js.org/configuration/entry-context/#entry
règle simple: un point d'entrée par page HTML. SPA: un point d'entrée, MPA: points d'entrée multiples.
entry: {
home: "./home.js",
about: "./about.js",
contact: "./contact.js"
}
Ce que je veux
Avec tout ce qui précède, ce que je veux maintenant est de pouvoir ajouter d'autres points d'entrée/modules/ou des applications quel que soit le terme correct est.
Je veux être en mesure de créer 2 ou plusieurs fichiers d'index:
Moniteur:
<div aurelia-app="monitor">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/monitor.js" %}"></script>
</div>
test:
<div aurelia-app="test">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/test.js" %}"></script>
</div>
chacun d'entre eux ayant leur propre paquet/point d'entrée/module/application, comment configurer ceci avec Webpack et Aurelia?
Le cas d'utilisation du aurelia-webpack-plugin est-il en quelque sorte limité à un seul point d'entrée? J'ai essayé d'ajouter des entrées explicites pour src/monitor/main.ts et src/test/main.ts mais je n'ai rien pour fonctionner correctement.
Avez-vous déjà commencé? – m0ngr31
Oui, lisez la réponse que j'ai postée – Joakim