У меня есть существующий проект PHP с jQuery и Bootstrap, не используя каких-либо интерфейсных рамки.
Я пытаюсь использовать webpack упаковщик модуль для того, чтобы создать единую точку входа для моего проекта ресурсами, управление с JS зависимостей с узел JS менеджер пакетов, выполнять задачи как минимизировать JS и в CSS, изображения изменение размера...и т. д. И улучшить время загрузки браузера, необходимый для загрузки одной страницы.
Я наткнулся на webpack учебники и надо установить его и установить его dev-сервер, но проблема в том, что я не могу понять, как я буду конвертировать все js скрипты и CSS ссылки в проекте (где у меня много jQuery и CSS библиотеки, которые используются для предоставления нескольких функций в проекте) использовать webpack.
Я должен переписать все мои JS и CSS файлы таким образом, что подходит webpack? Как сделать успешный переход?
Кроме того, я не способен управлять моей текущей PHP-приложение на webpack dev-сервер, это предназначено, чтобы работать там в первую очередь? Это только листинг директории проекта в то же время.
Я создал файл-тест `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 dev-сервер:
<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>
Пожалуйста, помогите мне понять вот концепция и как я могу успешно сделать эту миграцию?
Во-первых, чтобы ответить на ваши вопросы:
Предупреждение: Я'будете только взять на себя небольшую часть вашего вопроса. Сфера его применения слишком широка, чтобы быть упакованы в одном ответе на StackOverflow. Я только связаться с
webpack
и `webpack-CLI и установлен как (дев) зависимостей вашего проекта (не только в глобальном масштабе): npm install --save-dev webpack webpack-cli
обновление: более ранние версии этого ответа не требует установки
webpack-Кинк
. Начиная с версии 4 (февраль 2018), webpack'ы Кинк находится в отдельном пакете, и, следовательно, требует дополнительной упаковки.Созданы разработки и производственного процесса
Вы обычно хотите сделать все по-другому в развитии, чем в производстве (сокращение производства, видео-перезагрузка в развитии, ...) Чтобы добиться этого, мы'll хочу разделить наши файлы конфигурации.
Подготовка структуры каталогов
Позвольте's не согласны игнорировать webpack конфиг из вашего вопроса. Мы'МР начать все сначала, мы'd нужно было все равно менять почти все. Во-первых, создайте папку "построить" внутри корневой каталог проекта. Строить-связанные вещи будут идти туда, так как мы не'т хотите загрязнять свой проект's в корневую папку с конфигурационными файлами. (Вы'вновь свободной, чтобы имя этой папки по-разному, но следить за тем, чтобы во время этого урока.) Создать config.base.js
, а
config.production.js и config.development.js файл внутри этой папки. Отлично, у нас есть config для двух строить цепочки сейчас. Конфигурации по-прежнему пусто, хотя, так что давайте's теперь заполнить их с некоторыми элементарная логика.Установить webpack-слияние`
Но во-первых, мы'll необходимо, чтобы установить
webpack-слияние
.
npm install --save-dev webpack-merge
Этот пакет позволяет глубоко объединить несколько конфигураций webpack. Мы хотим использовать его для создания webpack конфигураций в зависимости от наших текущих условиях.
Теперь отрегулируйте build/config.base.js
:
module.exports = {
// We'll place webpack configuration for all environments here
}
Файл явно не просто экспортировать пустой объект прямо сейчас, но мы'll необходимо, чтобы для следующих шагов.
Поместите этот код в ваш build/config.production.js
:
const merge = require('webpack-merge')
module.exports = merge(require('./config.base.js'), {
mode: 'production'
// We'll place webpack configuration for production environment here
})
И почти тот же код входит в ваши build/config.development.js`:
const merge = require('webpack-merge')
module.exports = merge(require('./config.base.js'), {
mode: 'development',
watch: true
// All webpack configuration for development environment will go here
})
Я думаю, это'ы довольно интуитивно, что это делает: С помощью webpack с config.development.js` конфигурация будет получать общую конфигурацию и объединять свои конфигурации в декларацию.
обновление: опция
Режим
В приведенном выше конфигурационных файлов был добавлен в webpack 4 (выпущен в феврале 2018 года). Он устанавливает куча разумные значения по умолчанию для разработки и производства пакетов. Теперь запустив процесс будет выглядеть следующим образом из командной строки:
npx webpack --config build/config.development.js
# If the above doesn't work, you probably have an older version of npm (< 5.1) installed
# While npx is a really great tool, you can of course still call the path of the webpack executable manually:
node_modules/.bin/webpack --config build/config.development.js
...и наоборот для "производственной" среды. Эта команда довольно неуклюжим, чтобы использовать, но не беспокойтесь, мы'МР рассмотреть это позже.
Есть информация, что мы'будете хотеть, чтобы централизовать, чтобы сделать их легко заменяемыми. Пути к файлам такую вещь. Так давайте'ов извлечь их.
Создать paths.jsв папке
строить` и его экспортировать некоторые пути мы'll хочу использовать в дальнейшем:
const path = require('path')
// I'm really just guessing your project's folder structure from reading your question,
// you might want to adjust this whole section
module.exports = {
// The base path of your source files, especially of your index.js
SRC: path.resolve(__dirname, '..', 'public'),
// The path to put the generated bundle(s)
DIST: path.resolve(__dirname, '..', 'public', 'dist'),
/*
This is your public path.
If you're running your app at http://example.com and I got your DIST folder right,
it'll simply be "/dist".
But if you're running it locally at http://localhost/my/app, it will be "/my/app/dist".
That means you should probably *not* hardcode that path here but write it to a
machine-related config file. (If you don't already have something like that,
google for "dotenv" or something similar.)
*/
ASSETS: '/dist'
}
Как уже упоминалось выше, мы могли бы технически запустить нашу сеть строить в режим "развития" такой:
npx webpack --config build/config.development.js
Что'если команда слишком многословен, так давайте'ы изменить.
Это's путь более удобным для запуска процесса сборки через сценарии НПМ
. Добавить один скрипт в среде для упаковки`.в JSON вот так:
{
"scripts": {
"dev": "webpack --config build/config.development.js",
"prod": "webpack --config build/config.production.js"
}
}
Теперь вы можете запустить вашу сборку цепи с НПМ запустить ДевОТВ
. НПМ запустить прод` – который намного легче запомнить и быстрее набрать.
...как только там'Эс ничего строить, конечно.
Ладно, это было на самом деле достаточно много работы, не слишком много до сих пор достижения. Так давайте'ы начать с чего-нибудь более интересного: мы'Лл определить точку входа на JavaScript.
Поместите следующий код в ваш build/config.base.js
(полностью заменив существующий код):
const path = require('path')
const { SRC, DIST, ASSETS } = require('./paths')
module.exports = {
entry: {
scripts: path.resolve(SRC, 'js', 'index.js')
},
output: {
// Put all the bundled stuff in your dist folder
path: DIST,
// Our single entry point from above will be named "scripts.js"
filename: '[name].js',
// The output path as seen from the domain we're visiting in the browser
publicPath: ASSETS
}
}
Приведенная выше конфигурация ожидает index.js
жить в папке src/Яш
(как определено в build/paths.js`).
Позвольте'ы создать файл со следующим содержимым:
import './jquery.min.js'
import './jquery.migrate.js'
import './jquery.bxslider.min.js'
import './jquery.appear.js'
import './jquery.countTo.js'
import './bootstrap.js'
Как вы можете видеть, `index.js просто импортировать все файлы, которые вы хотите использовать. Если теперь вы запустите
npm run prod
из вашего терминала, подать scripts.js будет создан в вашей папке dist
. Вы можете включить в разметку с равнины ol' `<сценарий и GT; тег.
Поздравляем, вы'ве получил рабочую webpack установки!
Этот мини-учебник на самом деле все, что вы можете сделать с webpack. Это дает вам довольно прочный фундамент для вашей конфигурации, которые теперь вы можете заполнить все, что вам необходимо. И что на самом деле будет довольно много вещей. Я'список Лл еще несколько вещей, которые вы, возможно, хотите улучшить, с некоторыми ссылками, чтобы прочитать.
Если вы хотите использовать webpack, это может быть трудно сделать это, если вы не'т знаем о ее базовых понятий. Юхо Вепсамиäлäинэн создал большое руководство по началу работы с webpack, который мне очень помог. Он's также webpack из основных факторов, поэтому вы можете быть уверены, что он знает, что он'ы говоришь. Особенно погрузчики это понятие вы'МР действительно нужно знать. Много подсказок в этом списке также пояснили там. Подробнее: SurviveJS – webpack учебник
Он делает то, что название'ы сказать: возможно, вы не хотите, чтобы упаковать все ваши JavaScript в один громоздкий выходной файл. Это'ы работа webpack делает для вас, чтобы отделить части вашего пакета который нужен только на определенных страницах вашего приложения. Также, в зависимости от того, как часто вы're работая над проектом'ы на JavaScript, это может быть хорошей идеей, чтобы отделить сторонний код от вашего пакета для кэширования целей. Подробнее: webpack документации – разделение кода
Возможно, вы хотите улучшить свой сайт'ы кэширование поведение путем добавления хэш в вашем комплекте именами файлов, который зависит от их содержания. Это позволит создать (например) script.31aa1d3cad014475a618.js
вместо scripts.js
.
Затем этот файл может быть кэширован на неопределенный срок, потому что, как только его содержимое изменится, то имя файла будет также меняться.
Ваш PHP-код может затем использовать webpack-манифест-плагин для получения доступа к сгенерированные имена файлов.
Подробнее:
chunkhash
о том, как обогатить свой набор имен файлов с хэшами webpack-манифест-плагин
о том, как создать манифеста.формат JSON
, содержащий имена файлов вашего текущего пакета В случае, если вы хотите использовать современный код ES2015 на сайте'ы на JavaScript (и ориентируетесь номера-вечнозеленое браузеры), вы'll хочу transpile их регулярно в ES5. (Если термин "и ES2015" не имеет никакого смысла для вас, вы'вновь, скорее всего, не используете, и можете игнорировать этот пункт.) Подробнее: `Бабель-погрузчик – это погрузчик, который работает Бабеля на ваши скрипты
Есть webpack погрузчики для CSS. И Сасс. И Что PostCSS. Все, что вам нужно.
И поскольку вы'повторно, вероятно, не планирует включать в свой CSS через <сценарий и GT; теги, узнать *извлечение текста плагин* для создания реальных
.в CSS файлы.
обновление: в извлечение текста плагин очень создан. Однако, это'ы на самом деле своего рода Хак: он создает `.в CSS файлы, хотя webpack знает только JavaScript в качестве языка.
однако, это не так, как в webpack 4. Там's теперь система определять произвольные типы модулей, включая CSS.
длинная короткая история: ожидаете родной поддержки CSS в webpack на замену извлечение текста плагин в ближайшее время.
Подсказка: Пути
Я'МР упоминаю об этом, потому что это была настоящая боль для меня, пока я не понял, как webpack работает здесь: Помните, что webpack распознает свой адрес заявления (...) и попытаться устранить их относительно исходных файлов. Это означает, что ваш исходный файл
государственное/УСБ/главная.Усс
:
body {
background: url('../img/bg.jpg');
}
если ваш путь выходному общественных/дист/УСБ/пачка.в CSS, будет преобразован в:
body {
background: url('../../img/bg.jpg');
}
Подробнее:
экстракт-текст-webpack-плагин
обновление: с webpack 4 был выпущен в феврале 2018 года, в этом разделе является достаточно устаревшим. Устанавливая новый параметр
режим
в в"производства"
в теперь автоматически распространяется на JavaScript минификации. Есть краткая плагин для webpack, чтобы минимизировать ваш код JavaScript. Сокращение УСБ-это функция уже встроенная в УСБ-погрузчик, упомянутый выше плагин. Подробнее: Краткая webpack плагинОптимизация Изображения
webpack-это упаковщик, а не задача бегуна. Таким образом, оптимизация изображения не является подлинной webpack задач. Вы'д, вероятно, лучше с помощью актуальной задачей бегун или просто определить некоторые
НПМ
скрипты для этого. Это не значит, webpack не способно делать это. Есть плагины для довольно много всего. Подробнее:
Ваши проблемы с прямых перегрузки есть довольно простая причина: webpack Дев-сервер-это простой Node.js сервер обслуживает только статические файлы.
Для Вы'ре дело, webpack-dev-сервер, наверное, это неправильный инструмент на всех. Попробуйте webpack-livereload-плагин, а не на прямую перегружатель что вы можете просто включить через
<сценарий и GT; тег.
Подробнее: webpack-livereload-плагин
обновление: по состоянию на webpack 4 (выпущен в феврале 2018 года), source карты генерируются автоматически, когда функция
режим
установлен в"развития"
в. Всеми средствами, использовать карты источника. Они'll сделать вашу работу с пачками намного проще, вы'll хочу плакать. Подробнее: webpack документации – карты ИсточникКрайних Случаях
Как правило, все существующие скрипты вы'процесс Лл с webpack должен работать просто отлично. Единственное исключение, которое приходит мне на ум прямо сейчас бы о глобальных организаций. Посмотрите на следующий код:
function myFunc () {
console.log('I exist!')
}
Этот код в обычный текстовый файл JavaScript будет делать myFunc
доступен везде в JS коде. Но так как webpack код пачка обернута внутри функции обратного вызова (и, таким образом, оставляя в глобальной области видимости), там выиграл'т быть никакого доступа к этой функции больше.
Сторонних библиотек не должно быть проблемой, они обычно назначают их Globals для объекта "окно", но если вы'ве уже написано JS кода в вашем проекте, вы должны знать, что.
НПМ запустить прод
через крюк мерзавца, прежде чем нажимать / после потянуть. Надеюсь, что это помогает.
На основе существующих Вью-шаблонах и и ответ от @Loilo я сделал шаблон Vue вы можете установить с вю-в CLI`. Этот шаблон решает вам для приложение Vue можно расширить или интегрировать в существующее окружение.
npm install -g vue-cli
vue init delcon/webpack-simple my-project
cd my-project
npm install
devwatch:
Этот шаблон имеет дополнительную опцию devwatch запуска, который наблюдает за filechanges вместо использования webpack-dev-сервер. Это делает его пригодным для любой существующей среде web-сервера.
npm run devwatch
Дэв:
чтобы запустить его с по умолчанию webpack-dev-сервер, удалить <скрипт в src="и http://localhost:35729/livereload.js"></скрипт> " в " index.html
:
npm run dev
строительства:
для создания своего проекта для производства:
npm run build