私はこの解決策を得ることができません。何が最善のアプローチですか？私、これは私のセットアップでのWebPACKのangular2webpack - 1つのファイルだけを頭に、他のすべてを身体に注入
でHtmlWebpackPlugin使用しよう：
new HtmlWebpackPlugin({
template: 'src/index.html',
chunks: {
"head": {
"entry": "assets/js/ie9.js"
}
}
}),
あなたが必要とするすべてのものがある：
あなたはindex.htmlを
<head>
.
.
.
<% if (webpackConfig.htmlElements.headTags) { %>
<!-- Configured Head Tags -->
<%= webpackConfig.htmlElements.headTags %>
<% } %>
.
.
.
</head>
あなたのwebpack.common.js：
あなたの webpack.dev.jsでnew HtmlWebpackPlugin({
template: 'src/index.html',
title: METADATA.title,
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'head'
}),
new HtmlElementsPlugin({
headTags: require('./head-config.common')
})
const commonConfig = require('./webpack.common.js');
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'});
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
host: HOST,
port: PORT,
ENV: ENV,
HMR: HMR
});
module.exports = function (options) {
return webpackMerge(commonConfig({env: ENV}), {
.
.
.
}
}
がヘッドconfig.common.jsファイルを追加し、（exsmple用）これらのコードを書くwebpack.commonと合併し、これらのコードを追加します：
module.exports = {
link: [
/** <link> tags for 'apple-touch-icon' (AKA Web Clips). **/
{ rel: 'apple-touch-icon', sizes: '57x57', href: '/assets/icon/apple-icon-57x57.png' },
{ rel: 'apple-touch-icon', sizes: '60x60', href: '/assets/icon/apple-icon-60x60.png' },
{ rel: 'apple-touch-icon', sizes: '72x72', href: '/assets/icon/apple-icon-72x72.png' },
{ rel: 'apple-touch-icon', sizes: '76x76', href: '/assets/icon/apple-icon-76x76.png' },
{ rel: 'apple-touch-icon', sizes: '114x114', href: '/assets/icon/apple-icon-114x114.png' },
{ rel: 'apple-touch-icon', sizes: '120x120', href: '/assets/icon/apple-icon-120x120.png' },
{ rel: 'apple-touch-icon', sizes: '144x144', href: '/assets/icon/apple-icon-144x144.png' },
{ rel: 'apple-touch-icon', sizes: '152x152', href: '/assets/icon/apple-icon-152x152.png' },
{ rel: 'apple-touch-icon', sizes: '180x180', href: '/assets/icon/apple-icon-180x180.png' },
/** <link> tags for android web app icons **/
{ rel: 'icon', type: 'image/png', sizes: '192x192', href: '/assets/icon/android-icon-192x192.png' },
/** <link> tags for favicons **/
{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '/assets/icon/favicon-32x32.png' },
{ rel: 'icon', type: 'image/png', sizes: '96x96', href: '/assets/icon/favicon-96x96.png' },
{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '/assets/icon/favicon-16x16.png' },
/** <link> tags for a Web App Manifest **/
{ rel: 'manifest', href: '/assets/manifest.json' }
],
meta: [
{ name: 'msapplication-TileColor', content: '#00bcd4' },
{ name: 'msapplication-TileImage', content: '/assets/icon/ms-icon-144x144.png', '=content': true },
{ name: 'theme-color', content: '#00bcd4' }
]
};
また、あなたがNPMと角度-CLIをインストールし、自動的にWebPACKのファイルを追加するには、このコマンドを実行することができます：
npm install angular-cli --save-dev
とインストール後に実行します。
ng-eject
はWebPACKの設定ファイルを追加する