Webpack Aurelia网页包插件是如何工作的？

我最近花了几个小时在Webpack+各种框架（比如Vue）上测试它们

然后我开始在Aurelia+Webpack上工作，但经过数小时的搜索和配置调整，我不明白发生了什么

以下是我对webpack的理解：

• 它在

  entry

  对象中获取一个或多个条目文件
• 它创建一个或多个bundle，并在

  输出

  对象中配置
• Webpack正在处理输入文件中导入/需要的所有文件
• Webpack使用加载程序将转换应用于文件。例如，对于.js文件，加载程序babel带有预设的

  es2015

  ，对于.Vue文件，加载程序Vue loader等等
• 您可以配置插件，这些插件将在所有这些基础上进行额外的处理。例如，

  HMTLWebpackPlugin

  将采用HTML模板，并自动插入与要生成的捆绑包对应的正确的
  标记

好的

所以对于Aurelia，我安装了

Aurelia网页包插件

+

Aurelia loader

+

Aurelia loader网页包

。但这在Webpack中应该如何工作呢

我或多或少了解的是：

• 当webpack启动时，AureliaPlugin启动并读取

  src

  文件夹中的所有内容（默认情况下）
• 从这里开始，我认为它应该抓取

  index.html

  中定义的

  aurelia应用程序和主JS文件中的配置，然后提取其中定义的所有组件

但它不是那样工作的，至少在我的配置中不是这样。我发现，我必须将

aurelia framework

+

aurelia loader

+

aurelia loader webpack

作为webpack的一个条目提供，以便正确发现和处理我的所有组件/应用程序。如果我只提供主Aurelia JS文件（包含Aurelia配置），Webpack将处理该文件并停止

在Web包条目中加载Aurelia模块是一件非常重要的事情，例如在

那么，这是必要的吗？我必须导入/绑定

aurelia加载程序

和

aurelia加载程序网页

，以便正确处理我的所有aurelia应用程序/组件

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

我不是在评判，我只是想了解在处理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|woff\d*)$/, loader: "file"}
        ]
    }
};

---

感谢您的帮助，

在repo的wiki页面上讨论了该插件的许多细节

看看这个：