8 голосов

Маршрутиризация между .vue компонентами

Возможно вам нужен vue-router <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="...
Oleg Shleif's user avatar
8 голосов
Принятый

В чем смысл разделения js и css файлов в npm-пакетах с компонентами?

Отдельное подключение CSS позволяет заменить файл стилей на другой. К примеру, пользователь bootstrap может сделать вот так и заменить шрифт на всём сайте: $font-family-sans-serif: My Cool Font, $...
Pavel Mayorov's user avatar
8 голосов
Принятый

Имя "webpack" не распознано как имя командлета

В package.json добавь в "scripts": { "build": "webpack" }, И запускай через npm run build Отвечаю на вопрос из коммента. build - это просто название команды, его можно ...
fortavey's user avatar
  • 1,596
7 голосов
Принятый

Какую роль играет Redux в этой связке Node+React+SCSS+Redux+Webpack?

Это удобный стек для разработки приложений. Такой же, как, например, PHP + AngularJS. Никто не заставляет вас использовать именно его. Node можно заменить на Java, а SCSS на Stylus, например. React - ...
Nofate's user avatar
  • 34.6k
7 голосов
Принятый

Что означает `@` (собака) в пути файла?

Смотрите в файл build\webpack.base.conf.js, это alias который ссылается на определенный путь, по умолчанию на 'path to project/src/'.
Eugene Kulakov's user avatar
7 голосов
Принятый

webpack dinamic import

Сам webpack понимает синтаксис динамическогого import() и ему не нужны дополнительные инструменты/трансформеры. Все динамическая загрузка модулей в webpack доступа из коробки. Насчет babel и ...
skubarenko's user avatar
  • 2,680
6 голосов

Настройка Webpack для использования import/require ES6

Есть специальный плагин component-directory-webpack-plugin, настраивается следующим образом: Установка: npm i component-directory-webpack-plugin -S Настройка: // webpack.config.js var ...
kisenka's user avatar
  • 71
5 голосов
Принятый

Сборка Webpack'a работает только на сервере с node.js?

Сам webpack работает только на машине с node.js. Обычно это машина разработчика или билд-машина. На продакшн сервере вебпак не нужен. Результат работы вебпака уже работает там где предназначен ...
Утка Учится Укрываться's user avatar
5 голосов
Принятый

Глобальные переменные webpack

В контексте вопроса: для использования переменной в test в другом модуле(файле) можно использовать экспорт и импорт согласно спецификации ES-2015: //globals.js export const test = 123; //main.js ...
Doigrales's user avatar
  • 1,091
5 голосов
Принятый

Как динамически сменить значение атрибута во vue.js?

Наверно пробовали вот так по аналогии <img src ='{{my_var}}'> и не получилось? Для этого есть специальный синтаксис (директива): v-bind:src='my_var' или :src='my_var' Подробнее в ...
A K's user avatar
  • 28.7k
5 голосов
Принятый

React странный вывод в консоль в начале работы приложения

Это проблема webpack. Вы можете убрать это, выполнив следующие действия: Перейти в node_modules -> webpack -> hot folder Тут вы найдете файл log.js, откройте его Закомментируйте строку вывода в ...
Denis Bubnov's user avatar
5 голосов
Принятый

Как настроить CSS module в webpack без create-react-app?

Вариант ниже предполагает использование как модульной так и не модульной загрузки стилей. Лоадеры: style-loader css-loader sass-loader // для autoprefixer и т.п postcss-loader Конфиг: const ...
Vasily's user avatar
  • 11.5k
5 голосов
Принятый

ReferenceError: __dirname is not defined

добавил в webpack.config.js вот этот код import { fileURLToPath } from 'url'; import { dirname } from 'path'; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename);
Slavchik888's user avatar
4 голоса
Принятый

Webpack. Сборка отдельных css и скриптов в общие файлы

Мне приходилось решать такую задачу в одном из боевых проектов. Для этого я использовал функцию glob, которая собирает все файлы по маске. https://www.npmjs.com/package/glob И обертку для нее, ...
Утка Учится Укрываться's user avatar
4 голоса
Принятый

Как использовать классы упакованные Webpack'ом в js коде в браузере?

Попробуйте в конфиге webpack добавьте настройку library: nameOfYourLibrary Данный класс станет доступен как nameOfYourLibrary.default
Roman Polshikov's user avatar
4 голоса
Принятый

Как правильно импортировать модуль JavaScript

Для webpack 1 (то есть текущего стабильного документированного) нужно добавить root в секцию resolve: var path = require('path'); resolve: { root: [ path.resolve('yourRoot') ] }, yourRoot - ...
Утка Учится Укрываться's user avatar
4 голоса
Принятый

SVG спрайт в webpack

Первая главная ошибка - вы верите в волшебную силу спрайтов. Типа надо просто накидать кучу SVG файликов в одну папку, установить вебпак и будет счастье - всё ОК, все иконки на странице. Но не ...
Alexandr_TT's user avatar
4 голоса

Фундаментальное непонимание назначения Webpack

Сборщик модулей, верно? Не совсем верно, это не просто сборщик, это часть экосистемы фронта, часто вебпак является центром этой самой экосистемы. Hot modules reloading, node static server c live ...
DStrokov's user avatar
  • 1,082
4 голоса
Принятый

Уменьшить размер bundle.js

При использовании Webpack есть несколько простых способов значительного уменьшения размера сборки (и применять их, разумеется, можно в совокупности). Флаг -p Добавление этого флага при выполнении ...
bonusrk's user avatar
  • 438
4 голоса
Принятый

Как работает WebPack

Приветствую! Тут дело не столько в вебпаке/роллап, так как вебпак со второй версии поддерживает es6 тришейкинг. А дело в том, как модули импортировать. У вас разве не на тайпсприпте проект, или это ...
Daniel Khoroshko's user avatar
4 голоса
Принятый

React Webpack Target container is not a DOM element

Проверь, так ли у тебя выглядит index.html: <div id="content"></div>` <script src="bundle.js"></script>`
Ilya Avdeenko's user avatar
4 голоса
Принятый

Как подключать шрифты при сборке scss на webpack?

Ссылка на полный конфиг Вот мой способ подключения шрифтов для SCSS: { test: /\.(eot|svg|ttf|woff|woff2)$/, use: [ { loader: 'file-loader?name=./assets/fonts/...
Bleser's user avatar
  • 1,768
4 голоса

Webpack не помещает картинки при сборке в папку dist

Решил следующим образом, может кому-то пригодится. Добавил alias в webpac конфиг: const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = ...
hgtYer's user avatar
  • 43
4 голоса
Принятый

Как дебажить js после сборки в webpack

По sourcemap по большей части работает. Если не работает: optimization: { minimize: false }, sourcemap можно отключать в настройках девелопер-тулс (F12 -> F1).
Sergei Kirjanov's user avatar
3 голоса
Принятый

Как получить доступ к функции после компиляции webpack?

Внимание, ответ актуален для webpack 1 а не для вышедшего в релиз пару недель назад webpack 2. Там вероятно остаются те же принципы, но несколько отличается API. Через свой html вы обращаетесь к ...
Утка Учится Укрываться's user avatar
3 голоса

Использование ES6 модулей с Webpack

Необходимо добавить в webpack.config.js параметр target со значением "node": { target: 'node' } Эта опция говорит Webpack'у о том, под какую среду собирается бандл. По умолчанию значение этой ...
Michael Radionov's user avatar
3 голоса
Принятый

vue.js 2 && webpack-simple && style-loader

Потому что надо поставить сам style-loader а не vue style loader. то есть выполнить команду npm install style-loader --save-dev И нужен вам он только на этапе препроцессинга, поэтому --save-dev а не ...
Утка Учится Укрываться's user avatar
3 голоса
Принятый

NPM и deploy по ftp

Если у вас уже есть скрипт для деплоя, то вы можете добавить для него отдельную запись в scripts, а так же создать объединенную команду для последовательной сборки и выгрузки проекта: "scripts": { ...
Dmitriy Simushev's user avatar
3 голоса
Принятый

webpack-stream: где указать настройки при использовании другой версии webpack

когда ты конфигурируешь задачу следующим образом: gulp.task('wpstream', function() { return gulp.src('development/03_es6/index.js') .pipe(webpackStream({}, webpack)) .pipe(gulp.dest('...
pepel_xD's user avatar
  • 1,087
3 голоса
Принятый

как в webpack считывать все import'ы?

Ваши конфиги(те, что вы дали) абсолютно верны. Давайте разберемся с Вашими скриптами, а именно формулировкой jquery не работает из комментариев. Видно, наличие скриптов в бандле Вы определяли их ...
Vyacheslav Potseluyko's user avatar

Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими