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任务运行器显示以下错误

警告在./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执行静态依赖性分析。除非您通过使用PLATFORM.moduleName（＆＃34; path / to / resource＆＃34;）或webpack.config.js中的GlobDependenciesPlugin显式引用它们来使webpack知道它们的存在，否则将不包括动态加载的资源

当视图包含自定义元素或撰写元素时，Webpack构建失败

1 个答案: