Aurelia webpack插件的工作方式

Question

我最近花了几个小时在webpack 各种框架（如Vue）上进行测试。

然后，我开始在Aurelia WebPack上工作，但是经过数小时的搜索和配置调整，我无法理解发生了什么。

这是我对WebPack的理解：

• 它在entry对象中获取一个或几个条目文件
• 它创建一个或几个捆绑包，在output对象中配置
• webpack正在处理输入文件中的所有文件/所需的所有文件
• WebPack使用加载程序来将转换应用于文件。例如，用于.js文件的预设es2015的加载程序babel，.vue文件的VUE加载程序等...
• 您可以配置插件，这些插件将在所有这些之上进行其他处理。例如，HMTLWebpackPlugin将采用HTML模板，并自动插入与要生成的捆绑包相对应的正确的<script>标签。

罚款。

因此，对于Aurelia，我已经安装了aurelia-webpack-plugin aurelia-loader aurelia-loader-webpack。但是，这应该如何在WebPack中使用？

我或多或少理解的是：

• 启动WebPack时，Aureliaplugin启动并阅读src文件夹中的所有内容（默认情况下）
• 从那里，我认为它应该抓住index.html中定义的aurelia-app和Main JS文件中的配置，然后拉出所有定义的组件。

，但至少它不是在我的配置中工作。我发现的是，我必须将aurelia-framework aurelia-loader aurelia-loader-webpack作为WebPack的条目之一，以便正确发现和处理所有组件/应用程序。如果我仅喂食主要的Aurelia JS文件（包含Aurelia配置），请处理文件并在此处停止。

在WebPack条目中加载Aurelia模块是经常完成的，例如在skeleton Projects

中

那么，它需要什么吗？我必须导入/捆绑aurelia-loader和aurelia-loader-webpack，以便对所有Aurelia应用程序/组件进行正确处理？

如果这是为了正确处理Aurelia的必须做的事情，为什么插件不是自动完成的操作？

我没有判断，我只是想了解Webpack处理Aurelia应用程序时所做的。

供参考，这是我的webpack配置：

var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var HTMLWebpackPlugin = require('html-webpack-plugin');
const coreBundles = {
  // these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
  aurelia: [
    'aurelia-framework',
      'aurelia-loader',
      'aurelia-loader-webpack'
  ]
}
module.exports = {
    entry: {
        app: './src/main'
    },
    output: {
        path: "./dist",
        filename: "[name].js"
    },
    plugins: [
        new AureliaWebpackPlugin({
        }),
        new HTMLWebpackPlugin({
            template: "src/index.html"
        })
        ],
    module: {
        loaders: [
            {test: /.css$/, loader: "style!css"},
            {test: /.html$/, loader: "html"},
            {test: /.(png|svg|eot|ttf|woffd*)$/, loader: "file"}
        ]
    }
};

感谢您的帮助，

Answer 1

在插件的wiki页面上进行了许多细节进行讨论

https://github.com/aurelia/webpack-plugin/wiki