Recompile on save - Githubissues

carlosriveroib commented 6 years ago

Hi!! My handlebars templates are getting recompiled on every save even if I modify a .css or .js file. I would like to have it recompiled just if I modify a .hbs file. What's the correct approach?

nimayneb commented 6 years ago

I have a similar problem (looping plugin compilation) without changing files.

Dependencies:

- webpack@3.10.0
- handlebars-webpack-plugin@1.3.2
    └─ handlebars@^4.0.3
- html-webpack-plugin@2.30.1

My configuration for handlebar plugin (interaction with html plugin [layout, partials]) starts compilation after finishing of the webpack build and the webpack build also starts again... and so on - the task always loops - without changing files.

The webpack task builds html-templates (separated in "_temp" folder) with placeholders (<%= ... %>), that will be last compiled as final html file for the frontend application. the configuration is functional, not broken - only the looping is the problem...

File "webconfig.config.js" (abstracted):

    context: __dirname,
    output: {
        path: path.resolve(__dirname, "public/assets/"),
    },
    plugins: [
        new HandlebarsPlugin({
            entry: path.join(process.cwd(), "templates", "*.hbs"),
            output: path.join(process.cwd(), "_temp", "[name].html"),
            data: {},
            partials: [
                path.join(process.cwd(), "templates", "partials", "**", "*.hbs")
            ],
            helpers: {},
        }),

        new HtmlWebpackPlugin({
            hash: true,
            title: 'Webpack setup example',
            xhtml: false,
            inject: true,
            template: './_temp/index.html',
            filename: './../index.html',

            myPageHeader: "Welcome to simple Webpack"
        })
    ]

File "templates/index.hbs":

{{#> layouts/base}}

    {{#*inline "content-block"}}
        <h1><%= htmlWebpackPlugin.options.myPageHeader %></h1>
    {{/inline}}

{{/layouts/base}}

File "templates/layouts/base.hbs":

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
      <article>
          {{#> content-block}}

          {{/content-block}}
      </article>

      {{> partials/footer}}
  </body>
</html>

Build output:

$ npm run build

> webpack-example@1.0.0 build ...\webpack-example
> webpack

Webpack is watching the files…

HandlebarsPlugin: start compilation
HandlebarsPlugin: + partial 'partials/footer'
HandlebarsPlugin: + partial 'partials/headline'
HandlebarsPlugin: + partial 'layout/default'
HandlebarsPlugin: + partial 'layouts/base'
HandlebarsPlugin: created output '...\webpack-example\_temp\index.html'

Hash: 1bfc496c296ecc120b61
Version: webpack 3.10.0
Time: 20611ms
                  Asset       Size  Chunks             Chunk Names
           img/hmmh.png    6.43 kB          [emitted]
      js/main.bundle.js    87.8 kB       0  [emitted]  main
    css/main.bundle.css  154 bytes       0  [emitted]  main
  js/main.bundle.js.map     432 kB       0  [emitted]  main
css/main.bundle.css.map   96 bytes       0  [emitted]  main
        ./../index.html  376 bytes          [emitted]
   [0] multi ./scripts/Application 28 bytes {0} [built]
   [1] ./scripts/Application.js 189 bytes {0} [built]
   [2] ./styles/Stage.scss 41 bytes {0} [built]
   [3] ./scripts/Localization.json 95 bytes {0} [built]
   [5] ./node_modules/css-loader?{"minimize":true}!./node_modules/postcss-loader/lib?{"parser":"postcss-scss"}!./node_modules/sass-loader/lib/loader.js!./styles/Stage.scss 361 bytes [built]
   [8] ./images/hmmh.png 44 bytes [built]
    + 5 hidden modules
Child html-webpack-plugin for "..\index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./_temp/index.html 880 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--0-2!node_modules/postcss-loader/lib/index.js??ref--0-3!node_modules/sass-loader/lib/loader.js!styles/Stage.scss:
     1 asset
       [0] ./node_modules/css-loader?{"minimize":true}!./node_modules/postcss-loader/lib?{"parser":"postcss-scss"}!./node_modules/sass-loader/lib/loader.js!./styles/Stage.scss 361 bytes {0} [built]
       [3] ./images/hmmh.png 44 bytes {0} [built]
        + 2 hidden modules
HandlebarsPlugin: start compilation
HandlebarsPlugin: + partial 'partials/footer'
HandlebarsPlugin: + partial 'partials/headline'
HandlebarsPlugin: + partial 'layout/default'
HandlebarsPlugin: + partial 'layouts/base'
HandlebarsPlugin: created output '...\webpack-example\_temp\index.html'

Hash: 14e58a1a7e62b778464b
Version: webpack 3.10.0
Time: 3059ms
                  Asset       Size  Chunks             Chunk Names
      js/main.bundle.js    87.8 kB       0  [emitted]  main
    css/main.bundle.css  154 bytes       0  [emitted]  main
  js/main.bundle.js.map     432 kB       0  [emitted]  main
css/main.bundle.css.map   96 bytes       0  [emitted]  main
        ./../index.html  376 bytes          [emitted]
   5 modules
Child html-webpack-plugin for "..\index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./_temp/index.html 880 bytes {1} [built]
        + 3 hidden modules
HandlebarsPlugin: start compilation
HandlebarsPlugin: + partial 'partials/footer'
HandlebarsPlugin: + partial 'partials/headline'
HandlebarsPlugin: + partial 'layout/default'
HandlebarsPlugin: + partial 'layouts/base'
HandlebarsPlugin: created output '...\webpack-example\_temp\index.html'

sagold commented 6 years ago

@carlosriveroib with version 1.4.0 this plugin supports conditional rebuilds in watch mode. The plugin should only build if it is part of the hbs-compilation.

@nimayneb i am aware of the problem, but can not reproduce it most of the time. i will open a separate issue for this.

sagold / handlebars-webpack-plugin

Recompile on save #26