我在尝试需要html文件时遇到了一个奇怪的错误。有问题的代码是一个AngularJs应用程序,它是用typescript编写的,并使用webpack。
app.directive.ts
// require('./app.scss');
// import AppController from './app.controller';
function AppDirective(): ng.IDirective {
return {
restrict: 'E',
scope: {},
controllerAs: 'vm',
// controller: AppController,
controller: () => {},
// template: require('./app.html')
template: '<div>this is a test</div>'
}
}
angular
.module('myApp')
.directive('appDirective', AppDirective);
app.controller.ts
export default class AppController {
public static $inject = ['$scope'];
constructor(private $scope) {
}
}
app.html
<div>
THIS IS A TEST, REMAIN CALM
</div>
app.scss为空。
现在,由于包含了注释,这段代码在webpack中构建时没有任何错误,并将使用webpack-dev服务器进行部署。
使用webpack-dev服务器时,可以在服务器运行时更改代码并实时重新加载,我可以取消注释任何/所有注释行,它将正常工作。
然而,如果我关闭开发服务器并重新构建,它将失败,并给出以下错误:
未捕获的类型错误:无法读取未定义的属性"call"
Uncaught TypeError: Cannot read property 'call' of undefined__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.152 @ app.ts:2__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.153 @ main.browser.ts:1__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.0 @ main.bundle.js:7__webpack_require__ @ bootstrap 9163605…:50
webpackJsonpCallback@bootstrap 9163605…:21(匿名函数)@main.bundle.js:1
在webpack中的这一行失败:boostrap文件:
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
尝试取消注释app.scss行、控制器行或app.html行时会出现此错误。这种情况只有在重新生成后才会发生,其中任何或所有行都未注释。
我使用webpack进行构建,并在tsconfig中使用commonjs进行模块加载,并且在webpack.config中为这些类型的文件提供了以下webpack加载程序:
{
test: /.ts$/,
loader: 'awesome-typescript-loader',
exclude: [/.(spec|e2e).ts$/]
},
{
test: /.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /.html$/,
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
我已经使用angular js和typescript有一段时间了,但这是我第一次开始自己的项目,我仍然在蹒跚地完成webpack。
我很困惑,如果我在运行时插入它,但在重建后就停止工作,为什么这个代码会工作。我认为这与我的webpack配置有关,但我无法弄清楚,我已经被困了一段时间。如有任何帮助,我们将不胜感激。
更新我找到了原因,但没有找到解决办法。这似乎是由我的webpack-config:中的CommonsChunkPlugin引起的
new webpack.optimize.CommonsChunkPlugin({
name: helpers.reverse(['polyfills', 'vendor', 'main']),
// minChunks: Infinity
}),
如果我删除了这个插件,错误就会消失,但我就不再有这个插件了。
更新2
将插件初始化更改为这样可以修复问题:
new webpack.optimize.CommonsChunkPlugin({
names: ['polyfills', 'vendor', 'main'],
minChunks: 2
}),
但我仍然不明白为什么
根据Zze的建议发布更新#2作为答案
将插件初始化更改为这样可以修复问题:
new webpack.optimize.CommonsChunkPlugin({
names: ['polyfills', 'vendor', 'main'],
minChunks: 2
}),
但我仍然不明白为什么
如果在同一页面上加载了多个webpack编译的文件,它们将相互覆盖。使用module.output.library
选项为应用程序定义"命名空间"。