webpack

webpack SVG в CSS url файла: ModuleNotFoundError: Module not found: Error: Can't resolve '...' Ошибка подключения

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '...'

Чтобы использовать svg в css файле, просто укажите правильный относительный путь, например:

.login-page .bg_center_dot {
    position: absolute;
    top: 26.6927%;
    left: 72.2689%;
    width: 3.3613%;
    height: 50%;
    background: url(../images/bg-center-dot.svg) no-repeat 50% 0;
    background-size: 100% auto
}

webpack encore Настройка пседонима пути для файлов javascript

В Symfony 4.3 можно использовать вызов (webpack.config.js):

Encore
    .addAliases({ // псевдонимы путей для более удобной загрузки 
// вне зависимости от уровня вложенности файл в приложении
        '@universal': path.resolve(__dirname, 'assets/js/react/components/universal'),
      },
    );

После чего вместо путей типа:

import FormSection from '../../../universal/form/FormSection'

использовать:

webpack Как узнать версию

Перейдите в папку проекта и выполните:

npm list webpack

react Warning: Invalid DOM property class Как разрешить обычные html атрибуты

Warning: Invalid DOM property class

Известно что вместо напр. class в React надо писать className,
подобные проблемы можно убрать используя babel-plugin-react-html-attrs

Стандартная установка идет так:

webpack dev server Invalid Host/Origin header Ошбика, как решить

Запускайте дев-сервер с опцией --host (можно добавить её в команду из package.json), например:

--host mysite.loc

в качестве адреса можно указать тот, на котором работает ваша страница, которую и требуется перезагружать при обновлении js.

Подробнее об опции: https://webpack.js.org/configuration/dev...

Webpack Encore

То же самое в symfony 4 можно решить модификации package.json, в моем случае, я использовал формат:

webpack import Импорт из папки вложенной в текущую -- пример

Явно указывайте относительный путь, начиная с точки, если (если папка common лежит в той же папке, в которой расположен скрипт, в котором вы пишите данную инструкцию импорта):

import './common/bootstrap.js';

encore dev --watch Отрабатывает только один раз, не проводит пересборка при изменении файлов, не работает

В моем случае отслеживание изменений активировалось с помощью команды (см. использование npm c encore):

npm run-script watch

Также сразу же завершается (один раз собрав скрипты), а не продолжает отслеживать изменения.
Прямой запуск:

./node_modules/.bin/encore dev --watch

Получается тот же самый ответ (тоже компилируя один раз и завершаясь):

symfony webpack encore Установка и работа через npm (без yarn)

По сути encore является дополнением (оберткой) к Webpack, поэтому многие его команды тоже являются надстройками/упаковками над близкими по смыслу возможностями webpack-а.

Установка

Сначала ставим обычным образом энкор:

composer require encore

Потом подтягиваем зависимости с помощью npm:

deployer npm install + run bulid Не работает задание (task), Решение

The command "npm run build" failed.

Exit Code: 254 (Unknown error)

-- причина в том, что перед выполнением команд, необходимо переходить в нужную папку, пример для yii2:

Pages

Subscribe to RSS - webpack