Во-первых, чтобы ответить на ваши вопросы:

• Нет, вы'повторно не должен запускать приложения на PHP с помощью webpack сервера разработчиков. Объяснил в прямую перегрузку раздел ниже.

• Нет, вы выиграли'т придется переписывать свои активы. Наверное. См УСБ и границы разделы ниже.

  Предупреждение: Я'будете только взять на себя небольшую часть вашего вопроса. Сфера его применения слишком широка, чтобы быть упакованы в одном ответе на StackOverflow. Я только связаться с

• создание и развитие производственной среды для webpack
• связывать свой первый код JavaScript что должно дать вам фундамент для построения. Я'll тоже упомянуть некоторые вещи, которые вы хотите добавить и ссылку по ресурсам, чтобы прочитать. Итак, давайте's идти. Требования ## Я предполагаю, что у вас есть Node.js и НПМ установлен на вашем компьютере, и примерно знаю, как их использовать. Я также предполагаю, что у вас есть 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

Ладно, это было на самом деле достаточно много работы, не слишком много до сих пор достижения. Так давайте'ы начать с чего-нибудь более интересного: мы'Лл определить точку входа на 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
  }
}

Создать файл JavaScript

Приведенная выше конфигурация ожидает 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, это может быть трудно сделать это, если вы не'т знаем о ее базовых понятий. Юхо Вепсамиäлäинэн создал большое руководство по началу работы с webpack, который мне очень помог. Он's также webpack из основных факторов, поэтому вы можете быть уверены, что он знает, что он'ы говоришь. Особенно погрузчики это понятие вы'МР действительно нужно знать. Много подсказок в этом списке также пояснили там. Подробнее: SurviveJS – webpack учебник

Расщепления Код

Он делает то, что название'ы сказать: возможно, вы не хотите, чтобы упаковать все ваши JavaScript в один громоздкий выходной файл. Это'ы работа webpack делает для вас, чтобы отделить части вашего пакета который нужен только на определенных страницах вашего приложения. Также, в зависимости от того, как часто вы're работая над проектом'ы на JavaScript, это может быть хорошей идеей, чтобы отделить сторонний код от вашего пакета для кэширования целей. Подробнее: webpack документации – разделение кода

# Кеш#

Возможно, вы хотите улучшить свой сайт'ы кэширование поведение путем добавления хэш в вашем комплекте именами файлов, который зависит от их содержания. Это позволит создать (например) script.31aa1d3cad014475a618.js вместо scripts.js. Затем этот файл может быть кэширован на неопределенный срок, потому что, как только его содержимое изменится, то имя файла будет также меняться. Ваш PHP-код может затем использовать webpack-манифест-плагин для получения доступа к сгенерированные имена файлов. Подробнее:

• Неизменяемые кэширования о том, как кэшировать пакеты навсегда
• webpack документации chunkhash о том, как обогатить свой набор имен файлов с хэшами
• webpack-манифест-плагин о том, как создать манифеста.формат JSON, содержащий имена файлов вашего текущего пакета

  Transpiling

  В случае, если вы хотите использовать современный код ES2015 на сайте'ы на JavaScript (и ориентируетесь номера-вечнозеленое браузеры), вы'll хочу transpile их регулярно в ES5. (Если термин "и ES2015" не имеет никакого смысла для вас, вы'вновь, скорее всего, не используете, и можете игнорировать этот пункт.) Подробнее: `Бабель-погрузчик – это погрузчик, который работает Бабеля на ваши скрипты

  В CSS

  Есть 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 не способно делать это. Есть плагины для довольно много всего. Подробнее:

• imagemin могут уменьшать изображения довольно хорошо по-своему.
• imagemin-webpack-модуль будет интегрировать этот процесс в вашем webpack строить цепочки.

  В Прямом Эфире Перезагрузки

  Ваши проблемы с прямых перегрузки есть довольно простая причина: webpack Дев-сервер-это простой Node.js сервер обслуживает только статические файлы. Для Вы'ре дело, webpack-dev-сервер, наверное, это неправильный инструмент на всех. Попробуйте webpack-livereload-плагин, а не на прямую перегружатель что вы можете просто включить через<сценарий и GT; тег. Подробнее: webpack-livereload-плагин

  Source Карты

  обновление: по состоянию на webpack 4 (выпущен в феврале 2018 года), source карты генерируются автоматически, когда функция режим установлен в "развития" в. Всеми средствами, использовать карты источника. Они'll сделать вашу работу с пачками намного проще, вы'll хочу плакать. Подробнее: webpack документации – карты Источник

  Крайних Случаях

  Как правило, все существующие скрипты вы'процесс Лл с webpack должен работать просто отлично. Единственное исключение, которое приходит мне на ум прямо сейчас бы о глобальных организаций. Посмотрите на следующий код:

function myFunc () {
  console.log('I exist!')
}

Этот код в обычный текстовый файл JavaScript будет делать myFunc доступен везде в JS коде. Но так как webpack код пачка обернута внутри функции обратного вызова (и, таким образом, оставляя в глобальной области видимости), там выиграл'т быть никакого доступа к этой функции больше. Сторонних библиотек не должно быть проблемой, они обычно назначают их Globals для объекта "окно", но если вы'ве уже написано JS кода в вашем проекте, вы должны знать, что.

Автоматизировать!

Вы'll хочу автоматизировать свой рабочий процесс, насколько это возможно. Попробуйте запустить НПМ запустить прод через крюк мерзавца, прежде чем нажимать / после потянуть.

Надеюсь, что это помогает.

На основе существующих Вью-шаблонах и и ответ от @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"></скрипт&GT; " в " index.html:

npm run dev

строительства:

для создания своего проекта для производства:

npm run build