Webpack Proxy? Live Reloading bei Dateiänderung von Theme-CSS

[dness]

Guten Tag!

Lokal habe ich per MAMP einen Server laufen (Apache + MySQL). Die Contao-Installation liegt in htdocs. Zugang ist über "localhost:8888".

Nun möchte ich per Webpack nach einer Änderung der Datei einen automatischen Reload der Seite haben (Automatic Browser Refresh). Zur Zeit funktioniert das Kompilieren der Sass-Dateien beim Speichern doch muss ich trotzdem im Browser manuell reloaden. Welche Einstellungen brauche ich, damit Webpack nach dem Speichern der Datei im Browser anschließend reloaded?

Wenn ich webpack dev server einbaue öffnet er natürlich seinen Standard "localhost:8080". Den zu "watchenden" Port auf :8888 (der bereits offene Port von MAMP) umzuleiten ist wohl das was notwendig wäre. Aber wie?

Vielen Dank!

webpack.config.js :

var BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = (env = {}) => {
return {
		entry: ['./assets/js/main.js', './assets/scss/main.scss'],
		output: {
			filename: 'dist/bundle.js',
		},
    watch: true,
		module: {
			rules: [
				{
					test: /.scss$/,
					use: [
						{
							loader: 'file-loader',
							options: {
								name: '[name].css',
								outputPath: 'dist/'
							}
						},
						{
							loader: 'extract-loader'
						},
						{
							loader: 'css-loader'
						},
						{
							loader: 'postcss-loader'
						},
						{
							loader: 'sass-loader'
						}
					]
				}
			]
		}
	}
};

package.json

{
  "name": "theme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack && npm run dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0",
    "webpack": "^3.7.1"
  }
}

[Glumanda]

Ich verwende dafür noch Gulp, tut genau das gleiche und ist völlig ausreichend

var gulp = require('gulp');
var bs = require('browser-sync').create();
var $ = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/font-awesome/scss'
];

gulp.task('sass', function() {
  return gulp.src('scss/**/*.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({includePaths: sassPaths, outputStyle: 'compressed'}).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['last 2 versions', 'ie >= 9']}))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest('css'))
    .pipe(bs.stream());
});

gulp.task('default', function() {

  bs.init({
    proxy: 'http://localhost',
    logConnections: true,
    open: false,
    port: 3000
  }, function() {});

  gulp.watch(['scss/**/*.scss'], ['sass']);
  gulp.watch(['js/*.js'], [bs.reload]);
});