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文件夹中的所有内容（默认情况下）
从那里开始，我认为它应该抓住aurelia-app中定义的index.html和主JS文件中的配置，然后拉出那里定义的所有组件。

但它不是那样的，至少不是在我的配置中。我发现的是，我必须将aurelia-framework + aurelia-loader + aurelia-loader-webpack作为Webpack的一个条目提供，以便正确发现和处理我的所有组件/应用。如果我只提供主要的Aurelia JS文件（包含Aurelia配置），Webpack会处理该文件并停在那里。

将Aurelia模块加载到Webpack条目中已经做了很多工作，例如在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|woff\d*)$/, loader: "file"}
        ]
    }
};

感谢您的帮助，

Answer 1

在插件的回购的维基页面上讨论了很多细节

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

Aurelia Webpack插件是如何工作的？

1 个答案: