У меня есть существующий проект PHP с jquery и bootstrap, а не с использованием каких-либо интерфейсных фреймворков.
Я пытаюсь использовать модуль пакета webpack, чтобы создать единую точку входа для моих ресурсов проекта, управлять зависимостями js с менеджером пакетов js узла, запускать задачи, как минимизировать js css, изменить размер изображения... и т.д. И улучшите время загрузки браузера, необходимое для загрузки одной страницы.
Я наткнулся на учебники по webpack и установил его и установил его dev-сервер, но проблема в том, что я не могу понять, как я буду конвертировать все мои текущие js-скрипты и css-ссылки в проект (где у меня много библиотек jquery и CSS, используемых для предоставления нескольких функций в проекте) для использования webpack.
Должен ли я переписывать все мои файлы JS и CSS таким образом, который подходит для webpack? Как сделать успешную миграцию?
Кроме того, я не могу запустить мое текущее приложение php на devp-сервере webpack, значит, оно предназначено для запуска там в первую очередь? Пока что это список каталогов проекта.
Я создал файл 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 к моему скрипту, загружающему только для тестирования, следующим образом, надеясь, что приложение будет запущено на dev-сервере 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>
Пожалуйста, помогите мне понять концепцию здесь и как я могу успешно выполнить эту миграцию?