ビューにカスタム要素が含まれている、または要素を構成しているときにWebpackのビルドが失敗する

Question

aurelia + webpack.Webpackビルド（開発と生産の両方）プロセスを使用してアプリケーションを作成しました。これらの要素をビューから削除すると、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'; 
    } 
} 

WebPACKのタスクランナー示す

WARNING ./src/app/custom-component.ts モジュール内で障害が発生したパース：C：\ユーザーは\開発\文書はプロジェクト\ Visual Studioの2017 \ \ WebpackSample \ WebpackSample \ src \ app \ custom-component.ts予期しないトークン（2:11） このファイルタイプを処理するには、適切なローダーが必要な場合があります。

Answer 1

Webpackはスタティック依存解析を実行します。動的にロードされるリソースは、webpackがPLATFORM.moduleName（ "path/to/resource"）を使用して明示的に参照するか、webpack.config.js内のGlobDependenciesPluginを使用して明示的に参照するか、webpackに存在を認識させない限り含まれません。