The first time self set up webpack.
Dev server works seemingly fine, refreshes the page when changing styles. But if the .hbs or .html file (component markup) appears in the component folder, then the style file of this component stops updating (and the collector reacts to changes and seems to reassemble) and the server must be restarted to see the changes.
And with js as well.
I can not understand why the markup file breaks everything?
package.json:
{ "name": "game", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "lint": "eslint --cache --ext .js ./src/", "lint:fix": "eslint --fix --cache --ext .js ./src/", "build": "webpack -p", "start": "webpack-dev-server" }, "repository": { "type": "git", "url": "" }, "author": "dezIntegrator", "license": "ISC", "homepage": "", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "css-loader": "^0.28.7", "eslint": "^4.9.0", "eslint-config-airbnb-base": "^12.1.0", "eslint-loader": "^1.9.0", "eslint-plugin-import": "^2.8.0", "extract-text-webpack-plugin": "^3.0.2", "handlebars-webpack-plugin": "^1.3.0", "node-sass": "^4.7.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7" }, "dependencies": { "normalize.css": "^7.0.0" } } webpack.config.js
var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var HandlebarsPlugin = require('handlebars-webpack-plugin'); var path = require('path'); module.exports = { entry: './src/entries/app.js', output: { filename: 'app.js', path: path.resolve(__dirname, 'build') }, devServer: { open: true, overlay: true, watchContentBase: true }, module: { rules: [ { enforce: "pre", test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader", options: { failOnError: true } }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ publicPath:'../', fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) } ] }, plugins: [ new ExtractTextPlugin('./css/[name].css'), new HandlebarsPlugin ({ entry: path.join(process.cwd(), "src/pages", "*.hbs"), output: path.join(process.cwd(), "build", "[name].html"), partials: [ path.join(process.cwd(), "src/components", "*", "*.hbs") ], }), new webpack.HotModuleReplacementPlugin({}) ] }; Hierarchy: 
