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="...
7
голосов
Принятый
Какую роль играет Redux в этой связке Node+React+SCSS+Redux+Webpack?
Это удобный стек для разработки приложений. Такой же, как, например, PHP + AngularJS. Никто не заставляет вас использовать именно его. Node можно заменить на Java, а SCSS на Stylus, например.
React - ...
7
голосов
Принятый
Что означает `@` (собака) в пути файла?
Смотрите в файл build\webpack.base.conf.js, это alias который ссылается на определенный путь, по умолчанию на 'path to project/src/'.
7
голосов
Принятый
В чем смысл разделения js и css файлов в npm-пакетах с компонентами?
Отдельное подключение CSS позволяет заменить файл стилей на другой. К примеру, пользователь bootstrap может сделать вот так и заменить шрифт на всём сайте:
$font-family-sans-serif: My Cool Font, $...
7
голосов
Принятый
webpack dinamic import
Сам webpack понимает синтаксис динамическогого import() и ему не нужны дополнительные инструменты/трансформеры.
Все динамическая загрузка модулей в webpack доступа из коробки.
Насчет babel и ...
7
голосов
Принятый
Имя "webpack" не распознано как имя командлета
В package.json добавь в
"scripts": {
"build": "webpack"
},
И запускай через npm run build
Отвечаю на вопрос из коммента. build - это просто название команды, его можно ...
6
голосов
Настройка Webpack для использования import/require ES6
Есть специальный плагин component-directory-webpack-plugin, настраивается следующим образом:
Установка:
npm i component-directory-webpack-plugin -S
Настройка:
// webpack.config.js
var ...
5
голосов
Принятый
Сборка Webpack'a работает только на сервере с node.js?
Сам webpack работает только на машине с node.js.
Обычно это машина разработчика или билд-машина. На продакшн сервере вебпак не нужен.
Результат работы вебпака уже работает там где предназначен ...
5
голосов
Принятый
Глобальные переменные webpack
В контексте вопроса: для использования переменной в test в другом модуле(файле) можно использовать экспорт и импорт согласно спецификации ES-2015:
//globals.js
export const test = 123;
//main.js
...
5
голосов
Принятый
Как динамически сменить значение атрибута во vue.js?
Наверно пробовали вот так по аналогии
<img src ='{{my_var}}'>
и не получилось?
Для этого есть специальный синтаксис (директива):
v-bind:src='my_var'
или
:src='my_var'
Подробнее в ...
5
голосов
Принятый
React странный вывод в консоль в начале работы приложения
Это проблема webpack. Вы можете убрать это, выполнив следующие действия:
Перейти в node_modules -> webpack -> hot folder
Тут вы найдете файл log.js, откройте его
Закомментируйте строку вывода в ...
5
голосов
Принятый
Как настроить CSS module в webpack без create-react-app?
Вариант ниже предполагает использование как модульной так и не модульной загрузки стилей.
Лоадеры:
style-loader
css-loader
sass-loader
// для autoprefixer и т.п
postcss-loader
Конфиг:
const ...
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);
4
голоса
node-sass не устанавливается
Вот и нашла ответ на свой вопрос. На XP есть проблема со входом в библиотеку msvcrt.dll для Ruby. Хотя похожие проблемы с установкой node-sass есть и на 10 версии OS. На старых версиях проблема ...
4
голоса
Принятый
Webpack. Сборка отдельных css и скриптов в общие файлы
Мне приходилось решать такую задачу в одном из боевых проектов.
Для этого я использовал функцию glob, которая собирает все файлы по маске.
https://www.npmjs.com/package/glob
И обертку для нее, ...
4
голоса
Принятый
Как использовать классы упакованные Webpack'ом в js коде в браузере?
Попробуйте в конфиге webpack добавьте настройку library: nameOfYourLibrary
Данный класс станет доступен как nameOfYourLibrary.default
4
голоса
Принятый
Как правильно импортировать модуль JavaScript
Для webpack 1 (то есть текущего стабильного документированного) нужно добавить root в секцию resolve:
var path = require('path');
resolve: {
root: [
path.resolve('yourRoot')
]
},
yourRoot - ...
4
голоса
Принятый
SVG спрайт в webpack
Первая главная ошибка - вы верите в волшебную силу спрайтов. Типа надо просто накидать кучу SVG файликов в одну папку, установить вебпак и будет счастье - всё ОК, все иконки на странице. Но не ...
4
голоса
Фундаментальное непонимание назначения Webpack
Сборщик модулей, верно?
Не совсем верно, это не просто сборщик, это часть экосистемы фронта, часто вебпак является центром этой самой экосистемы. Hot modules reloading, node static server c live ...
4
голоса
Принятый
Уменьшить размер bundle.js
При использовании Webpack есть несколько простых способов значительного уменьшения размера сборки (и применять их, разумеется, можно в совокупности).
Флаг -p
Добавление этого флага при выполнении ...
4
голоса
Принятый
React Webpack Target container is not a DOM element
Проверь, так ли у тебя выглядит index.html:
<div id="content"></div>`
<script src="bundle.js"></script>`
4
голоса
Принятый
Как подключать шрифты при сборке scss на webpack?
Ссылка на полный конфиг
Вот мой способ подключения шрифтов для SCSS:
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader?name=./assets/fonts/...
4
голоса
Webpack не помещает картинки при сборке в папку dist
Решил следующим образом, может кому-то пригодится. Добавил alias в webpac конфиг:
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = ...
4
голоса
Принятый
Как дебажить js после сборки в webpack
По sourcemap по большей части работает.
Если не работает:
optimization: {
minimize: false
},
sourcemap можно отключать в настройках девелопер-тулс (F12 -> F1).
3
голоса
Принятый
Как получить доступ к функции после компиляции webpack?
Внимание, ответ актуален для webpack 1 а не для вышедшего в релиз пару недель назад webpack 2. Там вероятно остаются те же принципы, но несколько отличается API.
Через свой html вы обращаетесь к ...
3
голоса
Использование ES6 модулей с Webpack
Необходимо добавить в webpack.config.js параметр target со значением "node":
{
target: 'node'
}
Эта опция говорит Webpack'у о том, под какую среду собирается бандл. По умолчанию значение этой ...
3
голоса
Принятый
vue.js 2 && webpack-simple && style-loader
Потому что надо поставить сам style-loader а не vue style loader. то есть выполнить команду npm install style-loader --save-dev
И нужен вам он только на этапе препроцессинга, поэтому --save-dev а не ...
3
голоса
Принятый
NPM и deploy по ftp
Если у вас уже есть скрипт для деплоя, то вы можете добавить для него отдельную запись в scripts, а так же создать объединенную команду для последовательной сборки и выгрузки проекта:
"scripts": {
...
3
голоса
Принятый
webpack-stream: где указать настройки при использовании другой версии webpack
когда ты конфигурируешь задачу следующим образом:
gulp.task('wpstream', function() {
return gulp.src('development/03_es6/index.js')
.pipe(webpackStream({}, webpack))
.pipe(gulp.dest('...
3
голоса
Принятый
как в webpack считывать все import'ы?
Ваши конфиги(те, что вы дали) абсолютно верны.
Давайте разберемся с Вашими скриптами, а именно формулировкой jquery не работает из комментариев. Видно, наличие скриптов в бандле Вы определяли их ...
Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими
Связанные метки
webpack × 873javascript × 432
reactjs × 151
node.js × 118
vue.js × 100
typescript × 60
babel × 56
css × 54
npm × 51
gulp × 40
html × 39
ecmascript-6 × 33
webpack-dev-server × 32
webpack4 × 30
laravel × 29
frontend × 27
jquery × 22
sass × 22
веб-программирование × 19
scss × 19
pug × 18
сборка × 16
create-react-app × 16
vue-cli × 12
json × 11