Задать вопрос
Aetae

Aetae

Тлен
Ответы пользователя по тегу Webpack

  • Как настроить вывод скрипта в определенном месте при помощи Webpackе?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    webpack собирает js в замкнутый бандл. Он не пишет ничего в глобальную область видимости. Ты не можешь использовать ничего из cart.js если сам не "пошарил" это для общего доступа.
    Правильным решением будет положить ВЕСЬ код в cart.js, в т.ч. и createApp и разве что передавать туда настройки тем или иным образом.
    Но если очень хочется, в crat.js можно пошарить глобально нужные тебе функции, например: 
    window.createApp = createApp;
window.store = store;

    Тогда второй вариант твоего кода заработает.
    Скорее всего.)
    Ответ написан
    Комментировать
    Комментировать

  • Как перенести большой html шаблон на vue.js?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    И? Твой алгоритм абсолютно действенен.)

    Vue-шаблоны полностью html-соместимы(в отличе от).
    Кинул html в .vue.
    Кинул css по папочкам - сделал import '/some.css';
    Кинул картинки по папочкам - vue умный, сам их через webpack их подтянет.
    И всё работает.)
    А вот итеративность из js тебе придётся переписать vue-way. Если там какой jquery был или типа того - оно совсем не совместимо с парадигмой vue. Накостылять конечно можно, и довольно просто, но как - я тебе советовать не буду.)
    Ответ написан
    3 комментария
    3 комментария

  • Зачем преобразовывать ES модули в CommonJS?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ну потому что старые браузеры не умеют в esmodules, а изначальная идея babel как раз в поддержке старых браузеров - всё остальное наслоилось после.
    Также esm нельзя скомпоновать в один файл, в отличие от CommonJS.
    В любом случае это лишь умолчания, которые вы всегда можете поменять.
    Ответ написан
    4 комментария
    4 комментария

  • Как исправить ошибку Webpack React error: Module parse failed: Unexpected token?

    Aetae
    @Aetae
    Тлен
    index.jsx
    Нельзя использовать jsx синтаксис в js файлах.
    (Если очень хочется, то можно разрешить, но я лично против такого.)

    Также у тебя голый webpack, а для React нужна тонна настроек. Либо используй npm run build (который react-scripts build), либо делай npm run eject и правь настоящий конфиг React'a.
    Ответ написан
    Комментировать
    Комментировать

  • Почему после сборки webpack'ом появляется битая картинка?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    То, что файл ссылается на обработанную картинку - так оно и должно быть, в том и смысл loader'ов. А вот то, что она бьётся - может быть по разным причинам. Обычно такое происходит когда в цепочку loader'ов случайно встраивается левый. Чисто глядя на конфиг сложно что-то сказать, по хорошему нужен полноценный проект-пример на потыкать.
    Навскидку разве чтоtest: /\.js/, бросается в глаза, так как нет $ в конце, а значит может цеплять лишнего, но по идее тогда babel должен ругаться...
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать отдельный js файл на томже уровне что и dist?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Если юзается vue-cli - то в проекте есть папочка public, кладите туда.
    Если чистый webpack - то нужен copy webpack plugin.
    Ответ написан
    Комментировать
    Комментировать

  • Нужно ли знать синтаксис webpack фронту?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Достаточно представлять себе принципы и возможности, углубляться стоит по мере необходимости, как и со всем остальным. В мире слишком много всего, досконально всё это знать невозможно(если вы не супермен).
    По вебпаку у меня несколько написанных плагинов, пара лоадеров, хитро-закрученные конфиги entry-point'ов с шарингом chunk'ов и множество использованных малоизвестных фич за плечам. Знаю ли я webpack? Нет, я не знаю webpack, в нём ещё тонна чего я не каслся. Но документация вот она, сорцы вон они, надо будет - разберусь.
    Ответ написан
    Комментировать
    Комментировать

  • NextJS: Как импортировать JS-библиотеки?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    import './my-library.js'; // без from

    Если без allowJs, то ещё докинуть файлик my-library.d.ts с деклакрициями:
    declare let var1: number;
declare function fn1(): void;
// ...
    Ответ написан
    2 комментария
    2 комментария

  • Eslint не дает рендериться при ошибке в eslint?

  • Как указать Typescript понимать index.tsx по дефолту?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    moduleResolution: node попробуй поставить, хотя с по идее с"module": "es6", он по умолчанию такой должен быть...
    Также можно попробовать указать baseUrl.

    P.S. Возможно вообще просто надо ребутнуь\сбросить индекс в IDE, порой оно глючит.
    Ответ написан
    Комментировать
    Комментировать

  • Webpack - как включить в папку dist файлы json?

    Aetae
    @Aetae
    Тлен
    Webpack собирает приложение. Если ты что-то импортируешь - это тоже собирается. В частности json оказывается в виде готовых объектов внутри js файлов. Если тебе нужно подключать внешние json файлы уже после сборки - тебе нужно их подключать вручную как обычно: например используя fetch.
    Ответ написан
    Комментировать
    Комментировать

  • Как задать пути к файлам при сборке проекта vue-cli-service?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    publicpath
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать одновременно две сборки VUE сайта?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Ну например устанавливать эту переменную с помощью webpack.DefinePlugin во время сборки.
    Но в целом - нахрена вам две одинаковых сборки отличающихся одной переменной? Вынесите эту настройку в кофиг приложения и просто проставляйте нужную на нужной странице.
    Ответ написан
    2 комментария
    2 комментария

  • Динамический импорт улучшит загрузку VUE сайта или нет?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Прибьёт. Использовать следует разумно. В основном когда такие компоненты тянут приличные (по размеру относительно бандла) куски кода с собой, а вызываются редко.
    Ответ написан
    Комментировать
    Комментировать

  • Как получить локальные картинки за пределами проекта?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Эти картинки отсутствуют на сервере, потому что никто их туда не кладёт. Сервер(webpack devserver) работает не от локальной папки, а от структурированного как описано в конфиге результата сборки. Сделайте build и посмотрите в папку dist: именно так и выглядит структура файлов на сервере.

    Вы можете положить эту папку с картинками туда использовав copy-webpack-plugin. Если на сервер эта папка будет класться вручную и в прод. dist она вам не нужна - можете подключать этот плагин только для develpment.
    Альтернативно вы можете настроить devserver (используя before/after), чтоб он просто отдавал файлы из этой папки по соответствующему запросу(читая их содержимое вручную средствам node fs).
    Главное не забыть потом положить эту папку на сервер руками.
    Ответ написан
    Комментировать
    Комментировать

  • Как динамически менять пути к JS файлам в JSON файле во Vue Cli?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Напиши свой плагин, там ничего сложного: 
    class RandomPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync(this.constructor.name, (compilation, callback) => {
      const chunkList = [];
      for (const chunk of compilation.chunks) {
        // тут какая-нить фильтрация
        chunkList.push(...chunk.files);
      }
      // тут запись в файл или ещё что
      console.log(chunkList);
      callback();
    });
  }
}
    Ответ написан
    2 комментария
    2 комментария

  • Vue - как встроенное приложение?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Если не нужна поддержка IE11 и Safari - можно использовать web-компоненты и просто подключать стили внутри компонента - они инкапсулируются, иначе придётся покорячиться.

    Как это сработает с vuetify не скажу, но в похожей ситуации я использовал postcss-prefix-selector, просто добавив с помощью него короткий класс-префикс для всех стилей либы. Соответственно этот класс назначаешь на контейнер с vue и, при удаче, всё заработает.)

    Мне, увы, там ещё кастомный трансформ пришлось добавить для корневых (body, :root и т.п.) селекторов, попатчить саму либу местами и проследить чтобы теперь основные стили сайта не перебивали классы либы, но это уже отдельная история.)

    P.S. Для работы postcss-prefix-selector с vue-cli не обязательно вручную вкорячивать loader, можно его просто добавить в .postcssrc.js в plugins: 
    require('postcss-prefix-selector')({
    prefix: '.prefix'
}),
    Ответ написан
    2 комментария
    2 комментария

  • Почему websotrm не видит alias из webpack?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Возможно надо ему явно указать на конфиг:
    5ef9c87e6a094647920370.png
    Ответ написан
    3 комментария
    3 комментария

  • Как изменить max-width container scss?

    Aetae
    @Aetae
    Тлен
    Переменные надо декларировать до подключения основных стилей.
    Ответ написан
    Комментировать
    Комментировать

  • Возможно ли как то использовать константы в пути import'a?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Только динамический import() поддерживает использование переменных, при этом в бандл попадают все файлы соответствующие паттерну.

    Если же мы говорим именно о константах, то на этапе компиляции webpack всё равно не знает, что у вас там лежит в config. Он не запускает ваш код - он его собирает.
    Если конфиг-файл у вас статический, то вы можете подключить его в сам конфиг вэбпака и сделать там, например, алиас вида: 
    `~static/i18n/CONFIG_LANG.json`:  path.resolve(`./static/i18n/${config.lang}.json`)
    и в коде, соответственно, писать: 
    import default_locale from `~static/i18n/CONFIG_LANG.json`

    Это самый простой способ, в целом же через вэбпак можно много чего ещё наворотить. (даже написать свой loader, который будет таки (пытаться) расшифровывать константы в импорте)
    Ответ написан
    Комментировать
    Комментировать