Using webpack with an existing PHP and JS project : <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>
