0
AOTビルドのAngular（4.4.4）Webpack（3.6.0）スターターを作成しようとしていますが、cssを別個のバンドルに抽出する問題が発生しています（extract- text-webpack-plugin 3.0.1）。ExtractTextPluginがAngular AOTビルドで動作しない
私のプロダクトビルドを実行すると、webpackビルドは95% emittingになってしまいます。決して100％にはならず、distバンドルを出力しません。最初はstyle-loader（0.19.0）でインラインCSSを作成しようとしましたが、Angular AOTビルドではビルド中にウィンドウオブジェクトがないため、成功しませんでした（この時点でsass-loaderは失敗します）。このため、私は生産中にCSSを別のバンドルに抽出することを余儀なくされました（悪いことではありません）。
しかし、どういうわけか、コンパイラが停止してエラーが発生することはありません。 "build --prod": "webpack -p --config webpack.prod.js --progress"
webpack.common.js
module.exports = {
entry: {
app: './src/main.ts',
vendor: getVendorPackages()
},
output: {
path: __dirname + '/dist',
filename: "website.bundle.js"
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
plugins: [
new webpack.ContextReplacementPlugin(//Resolve Angular warnings
/angular(\\|\/)core(\\|\/)@angular/,
path.resolve(__dirname, '../src')
),
new webpack.optimize.CommonsChunkPlugin({ //Create secondary bundle containing dependencies
name: 'vendor',
filename: 'vendor.bundle.js',
minChunks(module) {
const context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new htmlWebpackPlugin({ //Generate index.html
template: './src/index.html'
}),
new webpack.ContextReplacementPlugin(//Only export the locals we need | https://github.com/moment/moment/issues/2517
/moment[\/\\]locale$/, /en|nl/
)
],
resolve: {
extensions: ['.js', '.ts', '.scss']
}
};
Webpack.prod.js
module.exports = merge(common, {
module: {
rules: [
{
test: /\.ts$/,
loaders: ['@ngtools/webpack']
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({ // Fallback is not necessary, since style-loader will fail with AOT build
use: ["css-loader", "sass-loader"]
})
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({ // Uglyfy the JavaScript output
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
warnings: false,
screw_ie8: true
},
comments: false
}),
new AotPlugin({ // Create AOT build
tsConfigPath: './tsconfig.json',
entryModule: __dirname + '/src/app/app.module#AppModule'
}),
new webpack.DefinePlugin({ // Set the node env so that the project knows what to enable or disable
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new ExtractTextPlugin("styles.css") //Create an external style bundle
]
});
そして、私のpackage.jsonの依存関係は次のようになります。
"dependencies": {
"@angular/common": "4.4.4",
"@angular/compiler": "4.4.4",
"@angular/core": "4.4.4",
"@angular/forms": "4.4.4",
"@angular/http": "4.4.4",
"@angular/platform-browser": "4.4.4",
"@angular/platform-browser-dynamic": "4.4.4",
"@angular/router": "4.4.4",
"core-js": "2.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.3",
"zone.js": "0.8.18"
},
"devDependencies": {
"@angular/compiler-cli": "4.4.4",
"@ngtools/webpack": "1.7.2",
"@types/core-js": "0.9.43",
"@types/node": "8.0.31",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.2.3",
"codelyzer": "3.2.0",
"css-loader": "0.28.7",
"extract-text-webpack-plugin": "3.0.1",
"html-loader": "0.5.1",
"html-webpack-plugin": "2.30.1",
"node-sass": "4.5.3",
"sass-loader": "6.0.6",
"style-loader": "0.19.0",
"tslint": "5.7.0",
"typescript": "2.5.3",
"webpack": "3.6.0",
"webpack-bundle-analyzer": "2.9.0",
"webpack-dev-server": "2.9.1",
"webpack-merge": "4.1.0"
}
次のように私の角度成分は次のとおりです。
@Component({
selector: 'hn-root',
templateUrl: './app.html',
styleUrls: ['./app.scss'],
})
export class AppComponent {
}
そして、私のプロジェクト構造は次のとおりです。
- src
-- app
-- app.component.ts
-- app.html
-- app.module.ts
-- app.scss
index.html
main.ts
誰かが私が間違っていることを知っていますか？