Closed carlosriveroib closed 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'
@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.
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?