CODEWITHSUNDEEP
webpackhtml-webpack-plugin
jcdsr
jcdsr

Reputation: 1151

webpack - inject only one file to head and all the others to the body

I can't get this solution, what is the best approach? I trying to use HtmlWebpackPlugin with webpack angular2

this is my setup:

new HtmlWebpackPlugin({
    template: 'src/index.html',
    chunks: {
        "head": {
            "entry": "assets/js/ie9.js"
        }
    }
}),

Upvotes: 1

Views: 1342

Answers (1)

Hootan Alavizadeh
Hootan Alavizadeh

Reputation: 411

All things you need is:

you should put this at head of index.html

<head>
.
.
.
  <% if (webpackConfig.htmlElements.headTags) { %>
  <!-- Configured Head Tags  -->
      <%= webpackConfig.htmlElements.headTags %>
  <% } %>
.
.
.
</head>

in your webpack.common.js:

 new HtmlWebpackPlugin({
    template: 'src/index.html',
    title: METADATA.title,
    chunksSortMode: 'dependency',
    metadata: METADATA,
    inject: 'head'
  }),

  new HtmlElementsPlugin({
    headTags: require('./head-config.common')
  })

in your webpack.dev.js add these codes to merge with webpack.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}), {
  .
  .
  .
  }
}

add head-config.common.js file and write these codes (for exsmple):

            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' }
              ]
            };

also you can install angular-cli with npm and run this command to add webpack files automatically:

 npm install angular-cli --save-dev

and after install run:

 ng-eject

to add webpack config files

Upvotes: 1

Related Questions