title: Using webpack with an existing PHP and JS project
body: <p>I have an existing PHP project with jquery and bootstrap, not using any front-end framework.</p>
  
  <p>I am trying to use webpack module bundler in order to create a single entry point for my project resources, manage js dependencies with node js package manager, run tasks as minify js css, image re-size...etc. And improve the browser loading time required to load a single page.</p>
  
  <p>I came across the webpack tutorials and got to install it and install its dev-server, but the problem is that I am not able to understand how I will convert all my current js scripts and css links in the project (where I have a lot of jquery and CSS libraries used to provide multiple features in the project) to use webpack.</p>
  
  <p><strong>Do I have to rewrite all my JS and CSS files in a way that suits webpack? How do I make a successful migration?</strong></p>
  
  <p><strong>Besides, I am not able to run my current php application on the webpack dev-server, is it meant to run there in the first place? It is only listing the directories of the project in the meantime.</strong></p>
  
  <p>I have created a test <code>index.js</code> file and used the following webpack configuration:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  module.exports =
  {
      entry: [
          './public/js/index.js',
          'webpack/hot/dev-server',
          'webpack-dev-server/client?http://localhost:8080'
      ],
      plugins: [
        new webpack.HotModuleReplacementPlugin()
      ],
      output: {
          path: path.join(__dirname, "public/dist/js"),
          publicPath : "http://localhost:8080/my_proj/public/dist/js",
          filename: "bundle.js"
      }
  
  };
  </code></pre>
  
  <p>I added the <code>bundle.js</code> to my script loads just for testing as follows hoping that the application will run on the webpack dev-server:</p>
  
  <pre><code>&lt;script type="text/javascript" src="public/dist/js/bundle.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="public/js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="public/js/jquery.migrate.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="public/js/jquery.bxslider.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="public/js/jquery.appear.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="public/js/jquery.countTo.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="public/js/bootstrap.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Please help me understand the concept here and how can I make this migration successfully?</strong></p>