Apache LAMP/PHP Framework Support

[tomshaw]

Has anybody got the dev server/HMR running on a PHP apache/stack? I've tried with Slim, Symfony, Wordpress, Zend, Laravel all I get when browsing to localhost:8080 is a directory listing. There are several tutorials out there on the web that I've followed closely for webpack/server V1 but not 2.

[tomshaw]

Using the following config I've got it loading and running It's just not refreshing the page. I can see it notices changes to my js/scss it's just not refreshing the page. I have to manually refresh.

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin');

let environment = process.env.NODE_ENV || 'development'; // Windows: $env:NODE_ENV="production"

let BUILD_DIR = path.resolve(__dirname, './public');
let APP_DIR = path.resolve(__dirname, 'public/scripts');

const config = {
  entry: APP_DIR + '/main.js',
  output: {
    path: path.resolve(__dirname, 'public/'),
    filename: 'js/build.js'
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader'
    }, {
      test: /\.(png|jpg|gif|svg|ico)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]?[hash]'
      }
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /\.(svg|ttf|woff|woff2|eot)$/,
      loader: 'url-loader?limit=5000',
      options: {
        name: 'fonts/[name].[ext]?[hash]'
      }
    }]
  },
  resolve: {
    alias: {
      "TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
      "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
      "TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
      "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
      "ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
      "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
      "debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
    }
  },
  devServer: {
    port: 3000,
    hot: true,
    inline: true,
    contentBase: 'public',
    proxy: {
      '*': {
        target: 'http://mysite.dev',
        secure: false,
        changeOrigin: true
      }
    },
    historyApiFallback: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin('./css/styles.css'),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(environment)
      }
    })
  ]
};

if (environment === 'production') {
  config.plugins.push(new webpack.optimize.UglifyJsPlugin());
} else {
  config.devtool = "source-map"; // cheap-module-source-map
}

console.log('Running: ' + environment + ' mode.');

module.exports = config;

[tomshaw]

Changing hot to false fixed it. Considering I'm building a generic ES6 project this is good enough for now.