title: Configuring Webpack to work in a Laravel application
body: <p>I would like to use <strong>webpack-dev-server</strong> for my basic Laravel application. From the <a href="http://webpack.github.io/docs/webpack-dev-server.html" rel="noreferrer">official Webpack docs</a> I learned the following:</p>
  
  <blockquote>
    <p>You may want to run a backend server or a mock of it in development.
    You should not use the webpack-dev-server as a backend. Its only
    purpose is to serve static (webpacked) assets.</p>
    
    <p>You can run two servers side-by-side: The webpack-dev-server and your
    backend server.</p>
  </blockquote>
  
  <p>At the bottom of the page they give an example on how to accomplish that. I followed along and got stuck with two error messages. This is my attempt to integrate Webpack into a Laravel application.</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var path = require("path");
  
  module.exports = {
      context: path.resolve('resources'),
      entry: [
          './assets/js/app.js'
      ],
      output: {
          path: path.resolve('public/assets/'),
          publicPath: 'http://localhost:8080/assets/',
          filename: "bundle.js"
      },
      devServer: {
          contentBase: 'public',
          hot: true,
          proxy: {
              "*": "http://laravel.dev/"
          }
      }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>app.blade.php</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Learning Laravel&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          @yield('content')
      &lt;/div&gt;
  
      @yield('footer')
      &lt;script src="http://localhost:8080/assets/bundle.js"/&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>vagrant@learning-laravel:~/learning-laravel$ webpack-dev-server --inline
  </code></pre>
  
  <p>Console output:</p>
  
  <pre><code>http://localhost:8080/
  webpack result is served from http://localhost:8080/assets/
  content is served from public
  Hash: 3346964212f5b22513c6
  Version: webpack 1.12.2
  Time: 347ms
      Asset    Size  Chunks             Chunk Names
  bundle.js  228 kB       0  [emitted]  main
  chunk    {0} bundle.js (main) 213 kB [rendered]
      [0] multi main 52 bytes {0} [built] [1 error]
      [1] /usr/lib/~/webpack-dev-server/client?http://localhost:8080 2.14 kB {0} [built]
      [2] (webpack)/~/node-libs-browser/~/url/url.js 22.3 kB {0} [built]
      [3] (webpack)/~/node-libs-browser/~/punycode/punycode.js 14.6 kB {0} [built]
      [4] (webpack)/buildin/module.js 251 bytes {0} [built]
      [5] (webpack)/~/node-libs-browser/~/url/~/querystring/index.js 127 
  </code></pre>
  
  <p>...</p>
  
  <pre><code>   [61] ./resources/assets/js/app.js 103 bytes {0} [built]
     [62] ./resources/assets/js/login.js 28 bytes {0} [built]
  
  ERROR in multi main
  Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in /home/vagrant/learning-laravel/resources
   @ multi main
  webpack: bundle is now VALID.
  </code></pre>
  
  <p>I am using Homestead. The application is served on <a href="http://laravel.dev/" rel="noreferrer">http://laravel.dev/</a>. So my question is how to run the two servers (the webpack-dev-server and the backend-server) side by side. What am I missing?</p>