Ошибка сборки Webpack, когда представление содержит элемент или элемент компоновки

Question

Мы создали приложение, использующее aurelia + webpack.WebPack build (как процесс разработки, так и производства) завершился неудачно, когда страница использует пользовательский элемент или составной элемент. Если мы удалим эти элементы из представления, процесс сборки webpack будет успешным.

package.json 

    { 

"dependencies": 
{ 
"aurelia-bootstrapper-webpack": "^1.0.0", 
"aurelia-event-aggregator": "^1.0.0", 
"aurelia-framework": "^1.0.1", 
"aurelia-history-browser": "^1.0.0", 
"aurelia-loader-webpack": "^1.0.3", 
"aurelia-logging-console": "^1.0.0", 
"aurelia-templating-binding": "^1.0.0", 
"aurelia-templating-resources": "^1.0.0", 
"aurelia-templating-router": "^1.0.0" 
}, 
"devDependencies": 
{ 
    "@types/node": "^6.0.52", 
    "aurelia-webpack-plugin": "^1.1.0", 
    "bluebird": "^2.9.2", 
    "html-loader": "^0.4.3", 
    "source-map-loader": "^0.1.5", 
    "toastr": "^2.1.2", 
"ts-node": "^1.7.2", 
"webpack": "^1.14.0" 
} 

} 

tsconfig.json

{ "compileOnSave": true, "compilerOptions": { "target": "es5", "module": "amd", "experimentalDecorators": true, "moduleResolution": "node", "sourceMap": false, "allowSyntheticDefaultImports": true, "lib": [ "es2017", "dom" ] }, "awesomeTypescriptLoaderOptions": { "forkChecker": true }, "exclude": [ "node_modules", "build" ] } 

webpack.config.js

var AureliaWebPackPlugin = require('aurelia-webpack-plugin'); 
var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
entry: { 
'app': [], 
'aurelia': [ 
'aurelia-bootstrapper-webpack', 
'aurelia-polyfills', 
'aurelia-pal', 
'aurelia-pal-browser', 
'aurelia-binding', 
'aurelia-dependency-injection', 
'aurelia-event-aggregator', 
'aurelia-framework', 
'aurelia-history', 
'aurelia-history-browser', 
'aurelia-loader', 
'aurelia-loader-webpack', 
'aurelia-logging', 
'aurelia-logging-console', 
'aurelia-metadata', 
'aurelia-path', 
'aurelia-route-recognizer', 
'aurelia-router', 
'aurelia-task-queue', 
'aurelia-templating', 
'aurelia-templating-binding', 
'aurelia-templating-router', 
'aurelia-templating-resources' 
] 
}, 

output: {  
    path: './build', 
    filename: '[name].bundle.js', 
    sourceMapFilename: '[name].bundle.js.map' 
}, 
module: { 
    preLoaders: [ 
     { 
      test: /\.js$/, 
      exclude: path.resolve('node_modules/aurelia-webpack-plugin'), 
      loader: "source-map-loader" 
     } 
    ], 
    loaders: [   
     { test: /\.html$/, loader: 'html', exclude: path.resolve('src/index.html') } 
    ] 

}, 
plugins: [  
    new AureliaWebPackPlugin(),  
    new webpack.optimize.CommonsChunkPlugin({ name: ['aurelia'] })   
], 
} 

мнение, какой процесс сборки WebPack неудачу (app.html)

<require from="./custom-component"></require> 
<custom-component></custom-component> 

пользовательских -component.ts

export class CustomComponent { 
    message: string; 
    constructor() { 
     this.message = 'This is sample text message'; 
    } 
} 

The WebPack задача бегун показывая следующие ошибки

ПРЕДУПРЕЖДЕНИЕ в ./src/app/custom-component.ts модуль синтаксического анализа не удалось: C: \ Users \ Developer \ Documents \ Visual Studio 2017 \ Projects \ WebpackSample \ WebpackSample \ src \ app \ custom-component.ts Неожиданный токен (2:11) Для обработки этого типа файла может потребоваться соответствующий загрузчик.

Answer 1

Webpack делает статический анализ зависимостей. Динамически загруженные ресурсы не будут включены, если вы не сделаете webpack осведомленным о своем существовании, либо явно ссылаясь на них, используя PLATFORM.moduleName («путь/на/ресурс»), либо с помощью GlobDependenciesPlugin в webpack.config.js