将webpack与现有的PHP和JS项目一起使用

我有一个带有jquery和bootstrap的现有PHP项目，没有使用任何前端框架。

我正在尝试使用webpack模块捆绑器来为我的项目资源创建单个入口点，使用节点js包管理器管理js依赖项，以缩小js css的方式运行任务，图像调整大小...等。并缩短了加载单个页面所需的浏览器加载时间。

我遇到了webpack教程，必须安装它并安装它的dev-server，但是问题是我无法理解如何转换项目中所有当前的js脚本和CSS链接（我在这里有很多jQuery和CSS库（用于在项目中提供多种功能）以使用Webpack。

是否必须以适合webpack的方式重写我的所有JS和CSS文件？如何成功迁移？

此外，我无法在webpack开发服务器上运行当前的php应用程序，是不是要首先在其中运行？同时，它仅列出项目的目录。

我创建了一个测试index.js文件，并使用了以下webpack配置：

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"
    }

};

我将bundle.js脚本添加到脚本负载中只是为了进行测试，如下所示，希望该应用程序可以在webpack开发服务器上运行：

<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>

请帮助我理解这里的概念，以及如何成功进行此迁移？