Вопросы с тегами [webpack]

1

голосов
3

ответ
45

Просмотры

Частная NPM ошибка библиотека рейза «Модуль синтаксического анализа не удалось»

Я пытаюсь создать свой libary с React и использовать его локально (с моей компанией мерзавец хранилищем). Я могу проверить мое приложение в то время как developping с началом НПМ выполнения. Мое приложение работает. Но когда я хочу использовать его в другом проекте, я получил эту ошибку: Ошибка в ./node_modules/mylib/src/views/calendar.jsx модуле синтаксического анализа не удалось: Неожиданный маркер (10:53) Вам может понадобиться соответствующий загрузчик для обрабатывать файлы этого типа. Линия задействованного: Const Календарь = ({месяц = ​​момент (), dayCellTitle =, заголовок = дети}) => {пакет импортируется так: "MyLib": «мерзавец + SSH: // мерзавец @ gitlab. mycompany.ch:mylib/mylib.git»Я стараюсь, но я получил худший: Plugin / файлов Предустановленные не разрешено экспортировать объекты, только функции. В / дома / ххххх / Документы / рабочие области / реагируют-календарь / node_modules / Babel предварительная установка стадии-0 / Библиотека / индекс. JS здесь файлы моего пакета: webpack.config.js константного пути = требуется ( «путь»); Const упак = требуется ( './ package.json'); Const LibraryName = pkg.name; module.exports = {выход: {путь: path.join (__ имя_директории, './dist'), имя файла: 'реагируют-calendar.js', библиотека: LibraryName, libraryTarget: 'UMD', publicPath: '/ расстояние /' , umdNamedDefine: истинный}, модуль: {правила: [{тест: /\.(js|jsx)$/, исключить: / node_modules /, использование: [ 'Бабель-погрузчик']}]}, постановляю: {псевдоним: { 'реагируют': path.resolve (__ DIRNAME, './node_modules/react '), 'реагируют-DOM': path.resolve (__ имя_директории,' ./node_modules/react-dom'),}}, {внешние: / / не связывайте реагировать или реагировать-РОМ реагируют: {CommonJS: " Есть ли способ узнать, если библиотека будет импортирована без ошибок, прежде чем делать импорт в другом проекте Edit я добавил пряжи перспективе построить на мой package.json, и запуск его не вызывают каких-либо ошибок: Entrypoint главный [большой] = реагирующие-calendar.js [45] (WebPack) /buildin/module.js 497 байт {0} [встроенный] [48] (WebPack) /buildin/global.js 472 байт {0} [встроенный] [244] ./ node_modules. / минуту / национальная_версия синхронизации ^ \ \ /.*$ 3 KiB {0} [необязательно] [встроенные] [368] ./src/index.js + 52 модули 182 KiB {0} [встроенные] | ./src/index.js 65 байт [встроенный] | ./src/views/calendar.jsx 1,17 KiB [встроенный] | ./src/views/day_cell_title.jsx 358 байт [встроенный] | ./src/views/calendar_header.jsx 1,15 KiB [встроенный] | ./src/store/calendar_store.js 3,85 KiB [встроенный] | ./src/views/calendar_grid.jsx 1,49 KiB [встроенный] | , /src/views/calendar_navigation_button.jsx 928 байт [встроенный] | ./src/views/calendar_title.jsx 290 байт [встроенный] | ./src/generators/month_generator.js 556 байт [встроенный] | ./src/painters/day_cell_color.js 593 байт [встроенный] | ./src/views/day_cell_content.jsx 547 байт [встроенный] | ./src/settings.js 332 байт [встроенный] | ./src/painters/event_color.js 374 байт [встроенный] | ./src/painters/range_color.js 591 байт [встроенный] | ./src/views/empty_day_cell_content.jsx 340 байт [встроенный] | + 38 скрытые модули + 743 скрытые модули JS 332 байт [встроенный] | ./src/painters/event_color.js 374 байт [встроенный] | ./src/painters/range_color.js 591 байт [встроенный] | ./src/views/empty_day_cell_content.jsx 340 байт [встроенный] | + 38 скрытые модули + 743 скрытые модули JS 332 байт [встроенный] | ./src/painters/event_color.js 374 байт [встроенный] | ./src/painters/range_color.js 591 байт [встроенный] | ./src/views/empty_day_cell_content.jsx 340 байт [встроенный] | + 38 скрытые модули + 743 скрытые модули
Xero
1

голосов
0

ответ
42

Просмотры

WebPack решения требуют аргументы перед сборкой (constexpr)

Я работаю на RESTful API сервера express.js. что я ожидаю что-то вроде узел Экспресса маршрутизатора промежуточного программного обеспечения для RESTful API базы на определенном пути к папке. но этот пакет с помощью динамических требует, который загружает модули во время выполнения с выражением. эта причина WebPack выдаст ошибку: Критическая зависимость: запрос о зависимости является выражением. что я сделал это изменение требует, чтобы require.context, вводящая проблема actrully: Критическая зависимость: требуется функция используется в некотором смысле, в котором зависимости не может быть статический извлеченным пример коды // импорта-routes.js функции importRoutes (папка, шаблон = /\.js$/) {константные файлы = require.context (путь_к_папка, правда, шаблон); . Files.keys () Foreach ((файл) => {// сделать что-то здесь}); } Module.exports = (папка, шаблон) => importRoutes (папка, шаблон); // индекс. JS константные маршрутов = требуется (»./ Lib / импорт-API ') (' ./ Apis'); // constexpr маршруты = требуется (»./ Lib / импорт-API ') (' ./ Apis'); // otherIndex.js константные маршрутизирует = требуется (»./ Lib / импорт-API ') (' ./ otherApis'); // constexpr маршруты = требуется (»./ Lib / импорт-API ') (' ./ otherApis'); Есть ли что-то так же, как constexpr в CPP, которые могли бы решить эту проблему на время компиляции? Отнесение constexpr
Zazck
1

голосов
0

ответ
265

Просмотры

Webpack «не может найти модуль» ошибка, путь неправильно

Я пытаюсь опубликовать мое заявление, и я получаю следующее сообщение об ошибке WebPack: Ошибка: Не удается найти модуль «C: \ Users \ User \ источник \ Repos \ DDvwn \ node_modules \ WebPack \ Bin \ webpack.js» Путь обеспечивает это неправильно. Правильный путь к файлу должен быть C: \ Users \ User \ источник \ Repos \ DDvwn \ DDvwn \ node_modules \ WebPack \ Bin \ webpack.js, с другой "DDVwn" вложенной присутствует в иерархии. Я не вижу место, чтобы изменить это в конфигурационном файле, и мои поиски в Интернете не были плодотворными. Кто-нибудь знает, как это исправить?
anesthetic
1

голосов
1

ответ
49

Просмотры

Как скомпилировать тест-только код с WebPack

У меня есть несколько частных методов, которые я хочу писать тесты для. Однако, поскольку эти частные методы, они не экспортируются. В этой статье показано, как можно использовать хрюкать, чтобы обернуть код в комментариях и этот код будет исключен из компиляции, если вы компиляции для производства. Есть ли нечто подобное для Webpack? В основном я хочу что-то, так что я могу сделать что-то вроде / * тест-только * / экспорт {_myPrivateMethod}; / * Конец тест-только * / И этот код будет исключен из окончательной компиляции, но будет включен при выполнении тестов.
Kousha
1

голосов
0

ответ
274

Просмотры

Угловая: ошибка, не установлен, как должно

Я новичок в угловую 2 и угловую среду CLI. Я работаю над проектом, и когда попытался установить угловую CLI и родственное вещество. Он был установлен, но: Когда нг --version проверяется Угловое CLI: 1.6.1 Node: 6.12.2 ОС: Linux x64 Угловая: ошибка ... анимации, кли, общий, компилятор, компилятор кли, ядро, формы .. . HTTP, язык-сервис, платформа-браузер ... платформа-браузер динамический, маршрутизатор машинопись: ошибка WebPack: ошибка Я повторил установку еще раз, но до сих пор то же самое происходит в конце. Я не могу получить, где я допустил ошибку. Просьба направлять мне через это. PS: Я пытаюсь запустить существующий проект, а не создавать новую. Обновление: На следующий лидерство дается @ maddy23285 в комментариях, он работал, но новый вопрос о том, PostCSS плагин появился. Угловая CLI: 1.6.2 Node: 6.12.2 ОС: Linux x64 Угловая: 5.1.3 ... анимации, общий, компилятор, компилятор CLI, основные, форма ... HTTP, язык-сервис, платформа-браузер ... Платформа-браузер динамический, маршрутизатор @ угловой / кли: 1.6.2 @ угловой-DevKit / Build- оптимизатор: 0.0.36 @ угловой DevKit / ядро: 0.0.22 @ угловой DevKit / схемы: 0.0.42 @ ngtools / JSON-схема: 1.1.0 @ ngtools / WebPack: 1.9.2 @ схемы / угловые: 0.1. 11 @ схемные / схемы: 0.0.11 машинопись: 2.4.2 WebPack: 3.10.0 telekha01 @ telekha01-H81M-S: ~ / рабочее пространство / rajtelekha-геодезического трек-web- de11d86a7c75 $ нг служить ** NG Live Development Сервер прослушивает локальный хост: 4200, откройте браузер на HTTP: // локальная: 4200 / ** 14% строительные модули 40/48 модули 8 активна ... odules/@angular/router/esm5/router.jsUnknown ошибки из PostCSS плагин. Ваша текущая версия PostCSS является 6.0.15, но autoprefixer использует 5.2.18. Возможно, это источник ниже ошибки.
Yashwanth M
1

голосов
0

ответ
145

Просмотры

Прекратить Webpack от компиляции несколько раз на одном изменении файла

Я использую Vue.js Single File Компоненты с машинопись. Для CSS есть WebPack загрузчик, который генерирует CSS стилей файл из .vue файлов. правила: [{тест: /\.vue$/, использование: [{погрузчик: 'Вью-погрузчик'}]}, {тест: /\.vue$/, использование: [{погрузчик: «WebPack-Распылитель-погрузчик }]}, {тест: /\.css?$/, использование: [ 'стиль-погрузчик', 'CSS-погрузчик']}] WebPack-форсунка-погрузчик генерирует main.css, который я импортировать в моем Main. вю файл как: импорт»./main.css. Теперь, когда мое изменение ничего Main.vue, он запускает WebPack-распылитель-загрузчик, который генерирует новый main.css. Но поскольку main.css является зависимостью Main.vue, WebPack считает Main.vue изменился и снова запускает WebPack-распылитель-погрузчик вызывает петлю. oneOf кажется, что он может быть использован для моего дела, но я не очень понимаю, как это сделать. Любые указатели?
Kushagra Gour
1

голосов
1

ответ
332

Просмотры

WebPack не связывая с BABEL-загрузчиком и реагировать

Я следую вместе с относительно старого учебника (с 2014 года) на РГРАХ. Я должен был использовать обновленную версию React, WebPack и Вавилонских поэтому есть некоторые отличия. Все работает до сих пор, за исключением, когда я пытался скомпилировать JSX в WebPack, он дает мне ошибку сборки. ОШИБКА в ./public/js/app.js модуля сборки не удалось: SyntaxError: Неожиданный маркер (7:15) 5 | Класс Hello расширяет React.Component {6 | визуализации () {7 | вернуться Привет Webpack !; | ^ 8 | } 9 | } 10 | Ниже мой Реагировать файл: импорт React, {Компонент} от 'реагировать'; импорт ReactDOM из «реагируют-дом»; Класс Hello расширяет React.Component {визуализации () {вернуть Hello Webpack !; }} ReactDOM.render (, document.getElementById ( 'реагируют')); и это мой webpack.config.js файл module.exports = {запись:».
Kris Martin
1

голосов
2

ответ
56

Просмотры

how can i avoid including repeatedly or abstract header & footer angular ui-router

вар headerView = {templateUrl: 'вид / заголовка / header.html', контроллер: 'HeaderCtrl'}; вар footerView = {templateUrl: 'кажд / сноска / footer.html'}; вар MYAPP = angular.module ( 'MYAPP', [ 'ui.router']); myApp.controller ( 'MainCtrl', функция ($ масштаб) {}); myApp.config (функция ($ stateProvider, $ urlRouterProvider) {// маршрут по умолчанию $ urlRouterProvider.otherwise ( "/"); // щ маршрутизатор заявляет $ stateProvider .state ( 'первый', {URL: "/ первый", вид : {заголовок: headerView, содержание: {шаблон: 'Первый контент', контроллер: функция ($ сфера) {}}, сноска: footerView}}) .state ( 'второй', {URL: "/ второй", просмотров: {заголовок: headerView, содержание: {шаблон: 'Второе содержание', контроллер: функция ($ масштаб) {}}, сноска: footerView}}); }); в вышеприведенном коде многократно включая верхние и нижние колонтитулы, поэтому я хотел бы избежать включений повторно колонтитулов. Как я могу избежать включения повторно или реферата этот заголовок и нижний колонтитулы, я использую узел, веб-пакет, UI-маршрутизатор .. сноска: footerView}}) .state ( 'второй', {URL: "/ второй", просмотров: {заголовок: headerView, содержание: {шаблон: 'Второе содержание', контроллер: функция ($ сфера) {}}, сноска : footerView}}); }); в вышеприведенном коде многократно включая верхние и нижние колонтитулы, поэтому я хотел бы избежать включений повторно колонтитулов. Как я могу избежать включения повторно или реферата этот заголовок и нижний колонтитулы, я использую узел, веб-пакет, UI-маршрутизатор .. сноска: footerView}}) .state ( 'второй', {URL: "/ второй", просмотров: {заголовок: headerView, содержание: {шаблон: 'Второе содержание', контроллер: функция ($ сфера) {}}, сноска : footerView}}); }); в вышеприведенном коде многократно включая верхние и нижние колонтитулы, поэтому я хотел бы избежать включений повторно колонтитулов. Как я могу избежать включения повторно или реферата этот заголовок и нижний колонтитулы, я использую узел, веб-пакет, UI-маршрутизатор .. {URL: "/ второй", вид: {заголовок: headerView, содержание: {шаблон: 'Второй содержание', контроллер: функция ($ масштаб) {}}, сноска: footerView}}); }); в вышеприведенном коде многократно включая верхние и нижние колонтитулы, поэтому я хотел бы избежать включений повторно колонтитулов. Как я могу избежать включения повторно или реферата этот заголовок и нижний колонтитулы, я использую узел, веб-пакет, UI-маршрутизатор .. {URL: "/ второй", вид: {заголовок: headerView, содержание: {шаблон: 'Второй содержание', контроллер: функция ($ масштаб) {}}, сноска: footerView}}); }); в вышеприведенном коде многократно включая верхние и нижние колонтитулы, поэтому я хотел бы избежать включений повторно колонтитулов. Как я могу избежать включения повторно или реферата этот заголовок и нижний колонтитулы, я использую узел, веб-пакет, UI-маршрутизатор .. Контроллер: функция ($ масштаб) {}}, сноска: footerView}}); }); в вышеприведенном коде многократно включая верхние и нижние колонтитулы, поэтому я хотел бы избежать включений повторно колонтитулов. Как я могу избежать включения повторно или реферата этот заголовок и нижний колонтитулы, я использую узел, веб-пакет, UI-маршрутизатор .. Контроллер: функция ($ масштаб) {}}, сноска: footerView}}); }); в вышеприведенном коде многократно включая верхние и нижние колонтитулы, поэтому я хотел бы избежать включений повторно колонтитулов. Как я могу избежать включения повторно или реферата этот заголовок и нижний колонтитулы, я использую узел, веб-пакет, UI-маршрутизатор ..
D V Yogesh
1

голосов
0

ответ
185

Просмотры

вопросы грузчиков CKEditor WebPack

Я хочу использовать CKEditor в проекте AdminLTE. Этот проект имеет URL-адрес погрузчиком в правилах: {тест: /\.(png|jpe?g|gif|svg)(\?.*)?$/, погрузчик: «URL-погрузчик», исключить: path.resolve (__dirname, "node_modules / @ CKEditor"), запрос: {предел: 10000, имя: utils.assetsPath ( 'IMG / [имя] [хеш: 7].. [доб]')}} это загружает все fontawesome глифы , Когда я хочу, чтобы добавить правило CKEditor SVG: {// Или /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/, если вы хотите ограничить этот загрузчик // к значки CKEditor 5'только. Тест: /\.svg$/, использование: [ «сырого погрузчик»]}, весь ад сыпучие и грузчики дают синтаксическую ошибку о неожиданных элементах на все найденный SVGs. Когда я удалить опцию Г в тестовом регулярном выражении приведенных выше правил, ни одна fontawesome не SVG показано, но в CKEditor SVG в достучаться. Я искал высоко и низко, но я не могу показаться, чтобы выяснить, как объединить эти два правила, или как отделить их достаточно, чтобы и применить. Небольшая помощь будет оценена.
Milo van Loon
1

голосов
2

ответ
654

Просмотры

Бабель-запрограммированный-ENV и стадия-0 запутанный

Этапы представляют собой статус экспериментальных функций? какие Fetures находятся на экспериментальной, любые ссылки / подробности о нем? "предустановки": [[ "Env", { "модули": ложные, "цели": { "браузеры": [ "последние 2 версии", "сафари> = 7"]}}], "этап-0", "реагируют"], "плагин": [[ "преобразование среды выполнения", { "хелпер" ложь "polyfill" ложь "регенератора": истинно}], [ "спектрально-декоратор-наследство"]]} должны я включаю в себя этап-0 или нет в вышеуказанной конфигурации?
user9122693
1

голосов
0

ответ
415

Просмотры

Webpack - Bundle только необходимые файлы CSS для производства

У меня есть приложение Vue, который имеет 3 различные темы CSS в зависимости от того, что «бренд» установлен в положение. Сейчас она работает в разработке. Я бег команды НПХ запустить Дев и передать в бренд, а затем установить переменный бренд, чтобы быть доступными по всему миру, а затем в моем main.js файла я установить необходимый CSS динамически в зависимости от того, что переменной бренды. вар бренд = окно .__ BRAND__; требуется ( '../ статического /' + бренд + /css/typography.css ') требует ( '../ статического /' + бренд + /css/header.css') требует (»../ статических / '+ бренд + /css/main.css') требуют (' ../ статический / '+ бренд + '/css/footer.css') Файловая структура: статические Foo CSS бар CSS Так что, если я бегу' НПМ - бренд = бар запустить DEV «это потребует» ..static / бар / typography.css' и т.д. Это прекрасно работает в моей местной окружающей среды; каждый из них имеет его» s собственный особый облик. Проблема у меня сейчас с созданием приложения для производства. Webpack каким-то образом компиляции ВСЕ CSS файлов в один, и я в конечном итоге с гибридным приложение, которое имеет некоторый стиль от каждого. Вместо этого, мне это нужно, чтобы скомпилировать CSS с только файлы, которые необходимы. Вот мой файл webpack.prod.conf: вар путь = требуется ( 'путь') вар Utils = требуется ( './ Utils ') вар WebPack = требуется (' WebPack ') вар конфиг = требуется (' ../ конфигурации' ) вар слияния = требуется ( 'WebPack-слияние') вар baseWebpackConfig = требуется (»./ webpack.base.conf ') вар CopyWebpackPlugin = требуется (' копирования WebPack-плагин ') вар HtmlWebpackPlugin = требуется (' HTML-webpack- плагин ') вар ExtractTextPlugin = требуется (' экстракт текста WebPack-плагин ') вар OptimizeCSSPlugin = требуется (' // извлечение CSS в свой собственный файл нового ExtractTextPlugin ({имя файла: utils.assetsPath ( 'CSS / [имя] [contenthash] .css')}) // Сжать извлеченный CSS. Мы используем этот плагин, так что возможно // дублируется CSS из различных компонентов может быть deduped. новый OptimizeCSSPlugin ({cssProcessorOptions: {безопасно: истинно}}) // генерировать DIST index.html с правильным хэшем активов для кэширования. // Вы можете настроить вывод путем редактирования /index.html // см https://github.com/ampedandwired/html-webpack-plugin новый HtmlWebpackPlugin ({имя файла: config.build.index, шаблон: 'index.html', впрыснуть: правда, Minify: {removeComments: истина, collapseWhitespace: истина, removeAttributeQuotes: истинные // Дополнительные параметры: // https: // GitHub. . | ') + ') $'), Порог: 10240, minRatio: 0,8}))} если (config.build.bundleAnalyzerReport) {вар BundleAnalyzerPlugin = требуется (' WebPack-расслоением-анализатор ») BundleAnalyzerPlugin webpackConfig.plugins.push (новый BundleAnalyzerPlugin ())} module.exports = webpackConfig и мой конфиг / index.js файл: // см http://vuejs-templates.github.io/webpack документации. вар путь = требуется ( 'путь') = {module.exports построить: {ENV: требуется ( './ prod.env '), индекс: path.resolve (__ имя_директории,' ../dist/index.html'), assetsRoot: path.resolve (__ имя_директории, '../dist'), assetsSubDirectory: 'статический', assetsPublicPath: '/', productionSourceMap: правда, // Gzip отключены по умолчанию, как много популярных статических хостов, такие как // Surge или Netlify уже GZIP всех статических активов для вас. // Перед установкой в ​​`true`, убедитесь, что: // НПМ установки --save-DEV компрессионного WebPack-плагин productionGzip: ложные, productionGzipExtensions: [ 'JS', 'CSS'], // Запуск команды сборки с дополнительный аргумент // Просмотр отчета анализатора расслоением после создания отделки: // `НПМ запуска сборки --report` // Установка для` true` или `false` всегда включить или выключить bundleAnalyzerReport: process.env.npm_config_report }, Dev: {ENV: требуется ( './ dev.env'), порт: 8081, autoOpenBrowser: правда, assetsSubDirectory: 'статические', assetsPublicPath: '/', proxyTable: {// прокси все запросы, начинающиеся с / API для jsonplaceholder '/ API': {цели: 'HTTP: // локальный: 3001', changeOrigin: истинно}}, // CSS Sourcemaps по умолчанию отключена, поскольку относительные пути являются "глючит" // с помощью этой опции, в соответствии с CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // по нашему опыту, они обычно работают, как и ожидалось, // просто быть в курсе эта проблема при включении этой опции. cssSourceMap ложь}} // CSS Sourcemaps по умолчанию отключена, поскольку относительные пути являются «глючит» // с этой опцией, в соответствии с CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // В нашем опыт, они обычно работают, как и ожидалось, // просто быть в курсе этой проблемы при включении этой опции. cssSourceMap ложь}} // CSS Sourcemaps по умолчанию отключена, поскольку относительные пути являются «глючит» // с этой опцией, в соответствии с CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // В нашем опыт, они обычно работают, как и ожидалось, // просто быть в курсе этой проблемы при включении этой опции. cssSourceMap ложь}}
Linx
1

голосов
0

ответ
600

Просмотры

Displaying images with webpack using require.context

Я сделал свое первое Реагировать приложение с помощью Webpack с помощью инструмента создания реагирующего-приложения. У меня есть неизвестное количество изображений в папке, я хотел бы показать, как мой фон приложений в случайном порядке. Используя некоторый код из документации WebPack и других потоков, которые я использую этот код в моем компоненте. импорта React, {Компонент} от 'реагируют'; импорт»./styles/css/App.css'; Функция requireAll (г) {r.keys () Foreach (г). вар изображения = r.keys (); Изображения = images.map (путь => "./images/backgrounds/" + путь); console.log (изображения); возвращать изображения; } Вар изображения = requireAll (require.context ( './ изображения / фоны /', правда, /\.jpg$/)); пусть randomIndex = Math.floor (Math.random () * images.length) + 0; вар = randomImgRef изображений [randomIndex]; Класс App расширяет компонент {визуализации () {возвращение (привет); }} Экспорта по умолчанию App; Это похоже на работу, фон стиль имеет правильный путь и моя консоль входит правильный путь также. Но изображения не отображаются, и я невежествен. Я думаю, что Webpack может не быть в том числе изображений в сборке, хотя код, я использую, кажется, что он должен сделать это. Так что я невежествен. Есть идеи?
Draxy
1

голосов
1

ответ
235

Просмотры

HTML-WebPack-плагин, добавив атрибут типа в тег сценария

Версия 2.30.1 новый HtmlWebpackPlugin ({название: 'Project', преуменьшать: {collapseWhitespace: правда, preserveLineBreaks ложь}, хэш: истинно, шаблон: './src/index.html'}) Результат: но должно быть: либо конфигурация является неправильным или отсутствует что-то или это ошибка?
Mark
1

голосов
0

ответ
226

Просмотры

Добавление хэшей имен файлов в угловых 2 приложений для производства, не Dev с веб-пакет

Я пытаюсь добавить хэш моих app.js имен файлов для производства строит только и у меня возникаю проблемы с настраиваемыми Webpack сделать это и оставить дополнительными сборки с WebPack-DEV-сервером функциональным. Для развития, хэши разорвать инкрементный строитель и WebPack-DEV-сервер, поэтому очень важно, что хэш применяется только к имени файла для производства и сборки развертывания. Если включить хэш, я должен остановить, развернуть и запустить свой проект для того, чтобы любые изменения, которые будут подхвачены серверами Dev. Я попытался переместить module.exports.output из в условном таким же образом, что производство и DEV строит нагрузки отдельных плагинов в webpack.config следующим образом: если ( «» производства process.env.NODE_ENV ===) {модуль. exports.output = {имя файла: '[имя] [хэш: 8]. .js', ChunkFileName: «[имя]. [хеш: 8]. chunk.js', путь: path.resolve (CWD, 'сборка'), publicPath: './build/', sourceMapFilename: '[имя] [хеш: 8]. .map'}} еще {module.exports. выход = {имя файла: '[имя] .js', ChunkFileName: '[имя] .chunk.js', путь: path.resolve (CWD, 'строить'), publicPath: './build/', sourceMapFilename: ' [имя] .map} Однако, это не имеет никакого эффекта. Могу ли я что-то отсутствует, или есть лучший способ сделать это? Первоначально выходной блок был в определении module.exports, и добавление [hash8] работы: выход: {имя файла: '[имя] [хеш: 8]. .Js', ChunkFileName:. «[Имя] [хэш: 8 ] .chunk.js', путь: path.resolve (УХО, 'строить'), publicPath: './build/', sourceMapFilename: «. [имя] [хэш: 8] .map»}, однако любые изменения, которые я сделал в IDE во разработчике, в то время запуска восстанавливания в VSCode не отражены в приложении работает в браузере, так что это конфигурация я могу только установить только для сборки развертывания. Я также попытался определить переменную и пытаться кодировать условие в самом именовании блоке. Const isDev = process.env.NODE_ENV == 'производства'; выход: {имя файла: `[имя] $ {this.isDev? '': '[Хэш: 8]..} Js`, ChunkFileName: `[имя] $ {this.isDev? '': '[Хеш: 8]. '} Chunk.js`, путь: path.resolve (CWD, 'сборка'), publicPath:' ./build/', sourceMapFilename: `[имя] $ {это. isDev? '': '. [Хэш: 8].}} Map`, но это также не работает. в то время как запуск восстанавливания в VSCode не отражены в приложении работает в браузере, так что это конфигурация, которую я могу установить только лишь для сборки развертывания. Я также попытался определить переменную и пытаться кодировать условие в самом именовании блоке. Const isDev = process.env.NODE_ENV == 'производства'; выход: {имя файла: `[имя] $ {this.isDev? '': '[Хэш: 8]..} Js`, ChunkFileName: `[имя] $ {this.isDev? '': '[Хеш: 8]. '} Chunk.js`, путь: path.resolve (CWD, 'сборка'), publicPath:' ./build/', sourceMapFilename: `[имя] $ {это. isDev? '': '. [Хэш: 8].}} Map`, но это также не работает. в то время как запуск восстанавливания в VSCode не отражены в приложении работает в браузере, так что это конфигурация, которую я могу установить только лишь для сборки развертывания. Я также попытался определить переменную и пытаться кодировать условие в самом именовании блоке. Const isDev = process.env.NODE_ENV == 'производства'; выход: {имя файла: `[имя] $ {this.isDev? '': '[Хэш: 8]..} Js`, ChunkFileName: `[имя] $ {this.isDev? '': '[Хеш: 8]. '} Chunk.js`, путь: path.resolve (CWD, 'сборка'), publicPath:' ./build/', sourceMapFilename: `[имя] $ {это. isDev? '': '. [Хэш: 8].}} Map`, но это также не работает. так что это конфигурация, которую я могу только установить только для сборки развертывания. Я также попытался определить переменную и пытаться кодировать условие в самом именовании блоке. Const isDev = process.env.NODE_ENV == 'производства'; выход: {имя файла: `[имя] $ {this.isDev? '': '[Хэш: 8]..} Js`, ChunkFileName: `[имя] $ {this.isDev? '': '[Хеш: 8]. '} Chunk.js`, путь: path.resolve (CWD, 'сборка'), publicPath:' ./build/', sourceMapFilename: `[имя] $ {это. isDev? '': '. [Хэш: 8].}} Map`, но это также не работает. так что это конфигурация, которую я могу только установить только для сборки развертывания. Я также попытался определить переменную и пытаться кодировать условие в самом именовании блоке. Const isDev = process.env.NODE_ENV == 'производства'; выход: {имя файла: `[имя] $ {this.isDev? '': '[Хэш: 8]..} Js`, ChunkFileName: `[имя] $ {this.isDev? '': '[Хеш: 8]. '} Chunk.js`, путь: path.resolve (CWD, 'сборка'), publicPath:' ./build/', sourceMapFilename: `[имя] $ {это. isDev? '': '. [Хэш: 8].}} Map`, но это также не работает. isDev? '': '[Хэш: 8]..} Js`, ChunkFileName: `[имя] $ {this.isDev? '': '[Хеш: 8]. '} Chunk.js`, путь: path.resolve (CWD, 'сборка'), publicPath:' ./build/', sourceMapFilename: `[имя] $ {это. isDev? '': '. [Хэш: 8].}} Map`, но это также не работает. isDev? '': '[Хэш: 8]..} Js`, ChunkFileName: `[имя] $ {this.isDev? '': '[Хеш: 8]. '} Chunk.js`, путь: path.resolve (CWD, 'сборка'), publicPath:' ./build/', sourceMapFilename: `[имя] $ {это. isDev? '': '. [Хэш: 8].}} Map`, но это также не работает.
Stephen R. Smith
1

голосов
1

ответ
326

Просмотры

нагрузка JQuery-щ-расслоение с Laravel-микс (WebPack)

В 5.2 я использовал глоток, и я просто установить это в app.js окна $ = window.jQuery = требуется ( 'JQuery.'); Требуется ( 'JQuery-щ-расслоение'); Это больше не работает, так что я был в состоянии загрузить JQuery из webpack.mix.js, как это: .autoload ({JQuery: [ '$', 'window.jQuery', 'JQuery']}); Но как же я загрузить JQuery-UI-пакет?
Chriz74
1

голосов
0

ответ
206

Просмотры

Неправильный URL в CSS

Я использую последнее все. Я transpiling SASS в CSS, и я ссылке на изображение: тело {фон: URL ( "../ изображений / некрасиво-car.jpg"); } Изображение получает изменения в соответствии с моими настройками, но путь неверен после Webpack делает свое дело ... В результате CSS является: тело {фон: URL (статический / медиа / уродливо car.147a1cf5.jpg)} Но нужно быть: тело {фон: URL (../ статические / СМИ / уродливо car.147a1cf5.jpg)} Я в конце веревки здесь и попробовал все, что я могу думать ... Вот пример репо: https://github.com/joacim-boive/webpack-setup/tree/labb1 Мой webpack.config.js файл из репозитория: Const путь = требуется ( «путь»); Const HtmlWebpackPlugin = требуется ( 'HTML-WebPack-плагин'); Const ExtractTextPlugin = требуется ( 'извлечения-текста WebPack-плагин'); module.exports = (окр = {}) =>
jBoive
1

голосов
1

ответ
51

Просмотры

vuejs - ленивая загрузка с помощью WebPack глыбы - импорт против requie-решимости

В случае отложенной загрузки с использованием WebPack ломти, я нашел несколько способов - один с помощью требует и решить и другой используют импорт. требуют и разрешения Const Главная ПУТЬ = решительность => {require.ensure ([ 'компоненты / Home / Home'], () => {решительность (требуется ( 'компоненты / Home / Home'));}, 'дом' ); }; импорт Const Главного ПУТИ = импорт (/ * webpackChunkName: "дом" * / 'компоненты / Home / Home'); Может кто-то пожалуйста, объясните мне, что разница между этими 2 подходами? И когда использовать каждый из них?
skubal
1

голосов
1

ответ
300

Просмотры

дерзость-погрузчик не компиляции SCSS в CSS, просто делает .css с SCSS форматирования

Было интересно, почему мои вложенные свойства не работают, когда все, что, казалось, показывают, что они должны быть. Посмотрел на CSS используется в закладке Источники консоли и его форматирования SCSS в CSS. Так что-то подобное в SCSS он просто уходит как: е {фонового цвета: # d9d9d9; границы: 1px сплошной черный важный;! Размер шрифта: 11px; обивка дно: 50%; выравнивания текста: центр; вертикальной Align: средний важно;! .table сечение-заголовок {выравнивания текста: левый важный;! }} Вместо того, чтобы превратить его в: й .table-раздел-заголовок {...} Во всяком случае, не уверен, что я делаю неправильно, но вот мой webpack.config.js: вар путь = требуется ( «путь») вар WebPack = требуется ( 'WebPack') вар BundleTracker = требуется ( 'WebPack-расслоением-трекер') вар ExtractTextPlugin = требуется (»
sockpuppet
1

голосов
0

ответ
264

Просмотры

Как использовать WebPack создать передний конец и администратор?

Я на самом деле новый на Node.js. Я пытаюсь создать приложение с правами администратора и интерфейс, используя Webpack и экспресс. Я создал пример приложения, но теперь проблема в том, как я могу создать приложение с администратором. Ниже я разделил мой WebPack конфигурационного файла уаг Webpack = требуется ( «Webpack»); вар путь = требуется ( «путь»); module.exports = {запись: {интерфейс: './src/index', бэкенд: './admin/index'}, модуль: {погрузчики: [{тест: /\.js?$/, погрузчик: «Бабель 'исключить: / node_modules /}, {тест: /\.css$/, заправку: [ 'стиль sourceMap',' CSS модули и importLoaders = 1 & localIdentName = [путь] ___ [имя] __ [местных] ___ [хэш?: base64: 5] ]}]}, Постановляю: {расширений: [ '', '.js']}, выход: {путь: path.join (__ имя_директории '/ общественность'), publicPath: '/', имя файла:' bundle.js '}, devServer: {contentBase:' ./public», горячий: истинно}, плагинов: [новый webpack.optimize.OccurenceOrderPlugin (), новый webpack.HotModuleReplacementPlugin (), новый webpack.NoErrorsPlugin ()]}; Webpack производства файл конфигурации вар конфигурации = требуется (»./ webpack.config.js'); вар WebPack = требуется ( 'WebPack'); config.plugins.push (новый webpack.DefinePlugin ({ "process.env": { "NODE_ENV": JSON.stringify ( "производство")}})); config.plugins.push (новый webpack.optimize. UglifyJsPlugin ({компрессные: {предупреждение: ложь}})); Есть ли простое решение или то, что я могу сделать сейчас?
Tareq Aziz
1

голосов
0

ответ
231

Просмотры

карма-WebPack sourcemaps не работает (тип сценария файлы не загружаются в веб-браузере для отладки)

Я использую Карма-Webpack. Карма Webpack sourcemaps не работает Когда я выполнить тесты с использованием кармы в Chrome, то исходные файлы для моих спецификаций появляются нечитаемыми в отладчике. Тем не менее, система в тестовых файлов (мой исходный код приложения) является загрузка нечитаемым ява скрипт в браузере так, очень трудно отлаживать. кто-нибудь может мне помочь, чтобы загрузить тип сценарий для Spec файла в отладчике webpack.test.config.js пути уага = требуется ( «путь»), WebPack = требуется ( «WebPack»); module.exports = {контекст: __dirname, выход: {}, кэш: {}, постановляю: {расширений: [ '.TS',' .js'], псевдоним: { "CLDR": path.resolve (__ имя_директории " node_modules / cldrjs / расстояние / CLDR ")}}, плагины: [новый webpack.SourceMapDevToolPlugin ({имя файла: нуль, тест: / \. (TS | JS) ($ | \?) / я})], модуль: {правила: [{тест: /\.ts$/, погрузчик: 'TS-погрузчик'}, {тест: /\.html$ / я, использование: 'HTML-погрузчик'}, {тест: /\.(js|ts)$/, исполнение: 'Post', 'погрузчик: İstanbul-instrumenter-загрузчик', запрос: {esModules: истинно}, исключить:. [/index\.ts/, /\.spec\.js$/, /\.t\.ts$/, / node_modules /, /.bin/, /decompressionworker\.ts/, / \ ( GLSL | против | фс) $ /]}]}, часы: ложь}; карма. конфигурации // конфигурации Карма // Сформирован Ср окт 18 2017 11:50:04 GMT + 0530 (Шри-Ланка поясному времени) вар webpackConfig = требуется ( '../ webpack.test.config'); module.exports = функция (конфигурации) {config.set ({BasePath: '', рамки: [ 'жасмин'], файлы: [{шаблон: "../node_modules/reflect-metadata/Reflect.js", включают в себя: истинно}, './karma-bundle.js'], WebPack: webpackConfig, препроцессоры: {' ./karma-bundle.js ': [' WebPack ']}, {webpackMiddleware: статистика: 'нормальный'}, плагинов: [требуется ( 'карма-покрытие'), требуют ( 'карма-покрытия-Стамбул-репортер'), требуют ( 'карма-жасмин'), требуют ( 'карма-мокко-репортер'), требуют ( 'карма-Webpack' ), // устанавливается в `true` не провалить команду тестирования, когда пороги не выполняются глобальные: {// пороговые значения для всех операторов файлов: 100, строки: 100, ветви: 100, функции: 100}}}})} карма bundle.js константные тесты = require.context (»./ ClientApp / виды, правда, /\.spec.ts$/); . tests.keys () Foreach (тесты);
lilan silva
1

голосов
0

ответ
61

Просмотры

Conditional memcached usage in isomorphic application

У меня есть изоморфное приложение, которые зависят от пакета с классом, которые реализуют интерфейс API из microservice. У меня есть пакет, которые реализуют интерфейс API из microservice и расширить другой класс - базовый класс для всех моего microservice пакетов и этот класс живет в другом пакете. У меня есть пакет с базовым классом, который реализует запросы microservices и т.д., которые я хочу реализовать кэширование с Memcached для стороны сервера запросов к API. Поэтому я добавляю его к базовому классу всех классов microserice. Я пытаюсь использовать условное требуется для Memcached, как это: this.cache = процесс && && process.env process.env.CACHE_CONFIG && Object.key (process.env.CACHE_CONFIG) .length> 0; если (this.cache === истина) {сопз Memcached = требуется ( 'Memcached'); // eslint-отключение строки Const = URI process.env.CACHE_SERVER || '127.0.0.1:11211'; этот. Memcached = новый Memcached (URI); } Но это не удается: ОШИБКА в ./node_modules/memcached/lib/connection.js модуль не найден: Ошибка: Не удается разрешить «child_process» ERROR в ./node_modules/memcached/lib/memcached.js модуль не найден: Ошибка: не удается разрешить «чистый» Как я могу это исправить? Есть идеи? Со всеми моими наилучшими пожеланиями. UPDATE У меня есть добавить это WebPack конфигурации: узел: {чистый: «пустой», child_process: «пустой»,}, сборка была успешной. сейчас - тестирование. UPDATE У меня есть добавить это WebPack конфигурации: узел: {чистый: «пустой», child_process: «пустой»,}, сборка была успешной. сейчас - тестирование. UPDATE У меня есть добавить это WebPack конфигурации: узел: {чистый: «пустой», child_process: «пустой»,}, сборка была успешной. сейчас - тестирование.
SilentImp
1

голосов
0

ответ
26

Просмотры

Webpack Дописывает на страницу С Каждым HMR Update

Я обновил до Webpack 3.10.0 и теперь каждый раз, когда страница обновляется с использованием горячего Замена модуля предыдущее содержимое страницы получает завернутый в DIV и оставили на странице ниже нового контента. Старое содержимое теряет все стили и просто делает страницу больше и больше с каждым обновлением. Кто-нибудь столкнуться с этой проблемой раньше?
Lukasz
1

голосов
1

ответ
93

Просмотры

Vue.js 2 & WebPack / NPM старт открывает и перезагружает в FF вместо Chrome

Я следую Vue.js учебник «The Ultimate Vue JS 2 Разработчики курса» (Project 2), и я бегу в проблему с браузером обновления на изменение файла. Я на Kubuntu 16.04 и стандартный браузер моей системы является Chrome, но тем не менее, каждый раз, когда я изменить файл в моем проекте, WebPack пытается открыть Firefox, который не установлен на моей системе (и я не хочу, чтобы использовать Firefox, но Chrome). Я уже прошел через webpack.config.js, но я просто не могу понять, где я мог бы изменить настройки браузера. webpack.config.js требуют ( '') dotenv конфигурации (). Const = путь требует ( 'путь'); Const WebPack = требуется ( 'WebPack'); module.exports = {запись: [ '] ./src/main.js, выход: {путь: path.resolve (__ имя_директории,' ./dist '), publicPath: '/ расстояние /', имя файла:' // других препроцессоры должны работать из коробки, не загрузчик конфигурации, как этот nessessary. 'СКС': 'вя-стиль-погрузчик CSS-погрузчик дерзость-погрузчик!', 'Дерзость': 'вя-стиль-погрузчик CSS-погрузчик дерзость-погрузчик indentedSyntax!?', 'JS': «столпотворение-погрузчик ? пресеты [] = окр»}}}]}, решительность: {псевдоним: { 'вю $': 'вю / расстояние / vue.common.js'}}, devServer: {historyApiFallback: правда, noInfo: истинно}, производительность: {подсказки: ложные}, devtool: '# Eval-источник-карта'}; если (process.env.NODE_ENV === 'Развитие') {module.exports.plugins = [новый webpack.optimize.OccurrenceOrderPlugin (), новый webpack.HotModuleReplacementPlugin (), новый webpack.NoEmitOnErrorsPlugin ()]; module.exports. entry.push ( '? WebPack-горячей промежуточного / клиент путь = / __ webpack_hmr & таймаут = 20000'); ? // noInfo = истинный и тихий = TRUE) module.exports.module.rules [0] .use.push ({погрузчик: 'WebPack-модуль горячие принимать'}); } Если (process.env.NODE_ENV === 'производство') {module.exports.devtool = '# источник-карта'; CONCAT ([новый webpack.DefinePlugin ({ «процесс // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []). .env ': {NODE_ENV: "производство"}}), новый webpack.optimize.UglifyJsPlugin ({sourceMap: истинно, сжимают: {предупреждения: ложные}}), новый webpack.LoaderOptionsPlugin ({минимизировать: истинный})] )} WebPack-DEV-middleware.js Const = webpackDevMiddleware требуется (» ./api '); если (process.env.NODE_ENV === 'развитие') {требуют ( './ WebPack-DEV-промежуточного слоя') Init (приложение). } Если (process.env.NODE_ENV === 'производство') {app.use ( '/ расстояние', express.static (path.join (__ имя_директории, 'расстояние'))); } App.use ( '/ общественная', express.static (path.join (__ имя_директория, 'общественность'))); Пусть шаблон = fs.readFileSync (path.resolve ( './ index.html'), 'UTF-8'); (Функция '/' (REQ, разреш) {res.send (шаблон);}) app.get; app.get ( '/ апи', функция (REQ, разреш) {api.getData (функция (ERR, данные) {если (ERR) {res.status (500) Пошлите (ERR);} еще {res.json (данные); } }); }); пусть OfflineData = JSON.parse (fs.readFileSync (path.resolve ( './ api_offline.json'), 'UTF-8')); app.get ( '/ offline_api', функция (Req, разреш) {пусть данные = offlineData.find (пункт => item.imdbID === req.query.i); если {данных = { "Ответ": "Ложь", "Ошибка": `IMDb ID $ {req.query.i} не found.`}} res.json (данные); (данные!) }); app.listen (process.env.PORT, функция () {console.log ( `Пример приложения прослушивает порт $ {process.env.PORT}`!), если (process.env.NODE_ENV === 'развитие') {требуют ( 'открытый') ( `HTTP: // локальный: $ {process.env.PORT}`);}}); Когда я открываю URL в Chrome, я могу увидеть страницу, но она не обновляется автоматически при изменении файла. Может кто-нибудь пожалуйста, скажите мне, что я делаю неправильно? UPDATE package.json { "имя": "вю-кино", "версия": "1.0.0", "Описание": "The Ultimate Vue.js Разработчики курса: Vue.js кино", " развитие ') {требуют ( "открыть") ( `HTTP: // локальный: $ {process.env.PORT}`, 'Google-хром'); }});
Bellinda Baumgartner
1

голосов
0

ответ
36

Просмотры

How to link an image from a global path

I need to link an image from a "global" path, a path not inside the application served by webpack. I have done something like : ,but I cannot see the image and if a take a look at the img element with inspector I see that the path is this: http://localhost:8080/users/name/home/Desktop/test.svg I think the reason is that all this images are served by webpack but I haven't any idea how to change this behaviour. Here my webpack dev configuration file: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { spawn } = require('child_process'); const redis = require('redis') // Config directories const SRC_DIR = path.resolve(__dirname, 'src'); const OUTPUT_DIR = path.resolve(__dirname, 'dist'); // Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up const defaultInclude = [SRC_DIR]; module.exports = { entry: SRC_DIR + '/index.js', output: { path: OUTPUT_DIR, publicPath: '/', filename: 'bundle.js' }, resolve: { alias: { 'hiredis': path.join(__dirname, 'aliases/hiredis.js') } }, module: { rules: [ { test: /\.css$/, include: /node_modules/, loaders: ['style-loader', 'css-loader'] }, { test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], include: defaultInclude }, { test: /\.jsx?$/, use: [{ loader: 'babel-loader' }], include: defaultInclude }, { test: /\.(jpe?g|png|gif)$/, use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }], include: defaultInclude }, { test: /\.(eot|svg|ttf|woff|woff2)$/, use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]'}], include: defaultInclude } ] }, target: 'electron-renderer', plugins: [ new HtmlWebpackPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }) ], devtool: 'cheap-source-map', devServer: { contentBase: OUTPUT_DIR, stats: { colors: true, chunks: false, children: false }, setup() { spawn( 'electron', ['.'], { shell: true, env: process.env, stdio: 'inherit' } ) .on('close', code => process.exit(0)) .on('error', spawnError => console.error(spawnError)); } } }; Thanks Paolo
Paolo Galizzi
1

голосов
1

ответ
390

Просмотры

Как не добавить тип тег сценария в Webpack?

Фактический стандарт W3C говорит, что он должен быть не тип = «текст / JavaScript» в теге. Таким образом, в Webpack, внутри HtmlWebpackPlugin Я использую следующие настройки: новый HtmlWebpackPlugin ({faviconhash: Date.now (), шаблон: 'index.ejs', имя файла: '../index.html', хэш: истинный}) То, что я получаешь HTML-файл, который хорош, но он содержит нежелательный параметр типа в моем теге сценария: то, что я хочу, это просто: Как я могу добиться этого? PS: Это сообщение от W3C HTML Validator: Внимание: Атрибут типа не является необходимым для ресурсов JavaScript.
Edenwave
1

голосов
0

ответ
35

Просмотры

Лучший способ активно развивать пакет НПМ, который потребляется другим приложение работает локально

В настоящее время я работаю над React приложением, которое потребляет Реагировать библиотеку мы также развивать. В настоящее время процесс копирования через Dist папку библиотеки к папке node_modules приложения. Чтобы устранить утомительный характер этого, я думал, что решение было бы просто: НПМ ссылка пакета в нашем приложении, и имеет JSX / React компоненты проходят через Бабель-погрузчик приложения. Таким образом, мы бы также получить Dev сервер WebPack, чтобы следить за изменениями в библиотеке и обновляется автоматически. Проблема в том, что настройки Вавилонских библиотек отличаются от тех, потребляющего применения. Например, импорт корень в библиотеке (например, импорт ~ / некоторые-модуль) должны решить из корневой папки библиотеки, но вместо этого, они решают в корневую папку приложения, что приводит к ошибкам, так как только конфигурация Бабель он использует это .babelrc из приложения. Я пытался добавить отдельные правила WebPack конфигурации, чтобы сделать исключения для библиотеки, но сейчас он чувствует себя вид Hacky. Кроме того, сервер WebPack DEV работает невероятно медленно загружаться, предположительно потому, что он работает преобразование Бабеля на библиотеке тоже. Есть ли более простой способ сделать это? Как говорила Webpack, что «для этой библиотеки в node_modules, использовать свой собственный конфигурационный файл, и соблюдать все свои собственные настройки Бабель и относительного импорт?» сервер WebPack DEV работает невероятно медленно загружаться, предположительно потому, что он работает преобразование Бабеля на библиотеке тоже. Есть ли более простой способ сделать это? Как говорила Webpack, что «для этой библиотеки в node_modules, использовать свой собственный конфигурационный файл, и соблюдать все свои собственные настройки Бабель и относительного импорт?» сервер WebPack DEV работает невероятно медленно загружаться, предположительно потому, что он работает преобразование Бабеля на библиотеке тоже. Есть ли более простой способ сделать это? Как говорила Webpack, что «для этой библиотеки в node_modules, использовать свой собственный конфигурационный файл, и соблюдать все свои собственные настройки Бабель и относительного импорт?»
John V
1

голосов
0

ответ
282

Просмотры

Modernizr тесты не работают на пользовательской сборки

Issue я в настоящее время переживает очень странный вопрос с Modernizr ... Я собрал свою собственную сборку Modernizr в /node_modules/modernizr/modernizr.js, которые я загружаю в мое приложение, как так (скомпилирован с WebPack): window.Modernizr = требуется ( 'Modernizr / modernizr.js'); если (!! Modernizr.flexbox || Modernizr.srcset) {console.log ( "A'rite, вы, кажется, живут в темных веков ..."); } По какой-то причине, Modernizr возвращается неопределенными на оба этих испытаний, и поэтому не удается. Однако, прежде чем вы говорите, я собрал свою сборку неправильно, он правильно добавлять классы, так что я могу подтвердить файла JavaScript правильно работает (в определенной степени) Что на земле происходит? Я пропускаю что-то действительно очевидное? Я это работает на другом сайте я построил несколько месяцев назад, так что я посмотрел на код там, и единственное различие заключается в том, что у меня есть «Modernizr-погрузчик» зависимость в package.json и я использую импортную Modernizr ... вместо , но, насколько я могу видеть, я даже не используя Modernizr загруженным ... Я пытался ... Я думал, что это может быть связано с его запуска до DOM была готова, так что я побежал следующий и все они не удалось: // Все из перечисленного не удалось! SetTimeout (функция () {если (Modernizr.flexbox || Modernizr.srcset) {console.log ( "A'rite, вы, кажется, живут в темных веков ...");!}}, 5000); $ ( 'Документ'). готовы (функция () {// То же самое ...}); Просто чтобы доказать, что это не было ничего общего с DOM, я также попытался следующие перед запуском тестов: console.log (. $ ( «HTML») атр ( «класс»)); Возвращаемый: Js Flexbox flexboxlegacy нет-flexboxtweener flexwrap srcset Update Чтобы добавить немного смеси к этому вопросу, следующие работы: // Изменено на «импорт» из «требуют» импорта Modernizr из «Modernizr / modernizr.js»; // Обратите внимание на «окно». console.log (window.Modernizr); Что на земле происходит ... Вышеперечисленные работы по какой-то причине, но другие методы не делают. Должно быть, я что-то не хватает JS Flexbox flexboxlegacy нет-flexboxtweener flexwrap srcset Update Чтобы добавить немного смеси к вопросу, следующие работы: // Изменено на «импорт» из «требуют» импорта Modernizr из «Modernizr / modernizr.js»; // Обратите внимание на «окно». console.log (window.Modernizr); Что на земле происходит ... Вышеперечисленные работы по какой-то причине, но другие методы не делают. Должно быть, я что-то не хватает JS Flexbox flexboxlegacy нет-flexboxtweener flexwrap srcset Update Чтобы добавить немного смеси к вопросу, следующие работы: // Изменено на «импорт» из «требуют» импорта Modernizr из «Modernizr / modernizr.js»; // Обратите внимание на «окно». console.log (window.Modernizr); Что на земле происходит ... Вышеперечисленные работы по какой-то причине, но другие методы не делают. Должно быть, я что-то не хватает
Ben Carey
1

голосов
0

ответ
367

Просмотры

Как настроить WebPack-горячего сервера промежуточного слоя с вю-сервер-визуализатора и вю-маршрутизатор?

Я пытаюсь настроить собственный экспресс-сервер с WebPack использовать горячую замену модулей & стороне сервера визуализации. Все, кажется, работает, за исключением интеграции WebPack-горячего сервера промежуточного слоя, который нуждается в экспресс-функцию промежуточного программного обеспечения с (Рез, REQ, последующие) Params - но я не могу получить мою голову вокруг о том, как правильно реализовать. Это моя конфигурация до сих пор: webpack.config.js Const WebPack = требуется ( 'WebPack'); Const = путь требует ( 'путь'); Const конфигурации = [{имя: 'клиент', запись: [ 'WebPack-горячего промежуточного программного обеспечения / клиент', './src/js/entry_client.js'], выход: {путь: path.resolve (__ имя_директории,' расстояние / JS / '), имя файл: 'app.js'}, модуль: {правила: [{тест: /\.vue$/, грузчики: 'вя-погрузчик' }, {Тест: /\.js$/, исключить: / node_modules /, погрузчик: 'Бабель-погрузчик'}]}, постановляю: {псевдоним: {вю $: 'вю / расстояние / vue.runtime.js'} }}, {имя: 'сервер', цель: 'узел', запись:»./src/js/entry_server.js, выход: {путь: path.resolve (__ имя_директории, 'расстояние / JS /'), имя файла : 'app.server.js', libraryTarget: 'commonjs2'}, внешние: требуется ( 'WebPack-Node-внешние') (), модуль: {правила: [{тест: /\.vue$/, погрузчик: ' вю-погрузчик»}]}, постановляю: {псевдоним: {вю $: 'вю / расстояние / vue.runtime.js'}}}]; если (process.env.NODE_ENV! == 'производства' ) {Конфигурации [0] = .plugins [новый webpack.HotModuleReplacementPlugin ()]; } Module.exports = конфигурация; entry_client.js импорт {createApp} от './app'; Const {приложение, маршрутизатор} = createApp (); router.onReady (() => {$ приложение монтирования ( '# приложение.');}); entry_server.js импорт {createApp} от './app'; Контекст экспорта по умолчанию => {возвратить новый посыл ((решительность, отклонять) => {сопз {приложение, маршрутизатор} = createApp (); router.push (context.url); router.onReady (() => {если (! . router.getMatchedComponents () длина) возвращение отвергают ({код: 404}); решимость (приложение);}, отклонить);}); }; app.js импорт Вьет из «ви»; импорт App из '../vue/app.vue'; импорт {createRouter} от './router'; экспорт функции createApp () {Const маршрутизатор = createRouter (); Const приложение = новый Вью ({маршрутизатор, визуализации: ч => ч (приложение)}); возвращение {приложение, маршрутизатор}; } Router.js импорт Вьет из «ви»; импорт маршрутизатор от «вю-маршрутизатор»; импорт Главная из «../vue/home.vue»; импортировать О «из ../vue/about.vue»; Vue.use (маршрутизатор); Функция экспорта createRouter () {вернуть новый маршрутизатор ({режим: 'История', маршруты: [{путь: '/', компонент: Главная}, {путь: '/ о', компонент: О}]}); } server.js Const = выразить требуется ( 'экспресс'); константное фс = требуется ( «фс»); Const = путь требует ( 'путь'); Const расслоение = требуется ( './ расстояние / JS / app.server'); Const визуализатор = требуется ( 'ви-сервер-визуализатор') createRenderer ({шаблона:. фс. readFileSync ( './ SRC / HTML / index.html', 'UTF-8')}); Сервер = Const экспресс (); // добавить VUE HMR промежуточное программное обеспечение, если (process.env.NODE_ENV == 'производства') {сопз WebPack = требуется ( 'WebPack'); Компилятор Const = WebPack (требуется ( './ webpack.config')); server.use (требуется ( 'WebPack-DEV-промежуточного слоя') (компилятор, {noInfo: истинно, serverSideRender: истинно})); server.use (требуется ( 'WebPack-горячей промежуточное программное обеспечение') (compiler.compilers.find (компилятор => compiler.name === 'клиента'))); // server.use (требуется ( 'WebPack докрасна-сервера промежуточного программного обеспечения') (компилятор)); } Еще {// статический файл служит server.use (требуется ( 'служить-фавиконки') (path.join (__ имя_директории, 'SRC / PNG / Favicon-32x32.png'))); server.use (express.static (path.join (__ имя_директории, 'расстояние /'), {индекс: ложный})); } Server.get ( '*', (REQ, Рез) => {bundle.default ({URL: req.url}.), То (приложение => {renderer.renderToString (приложение, {название: 'Некоторые название', описание: 'Некоторые описание'}, (эээ, HTML) => {если (ERR) {console.error ( 'Ошибка в renderToString:', эээ); возвращение res.status (500) Пошлите ( 'Внутренняя ошибка сервера' );} res.send (HTML);});}, ERR => {если (err.code === 404) возвращение res.status (404) Пошлите ( 'Страница не найдена'); console.error ( ERR), возвращение res.status (500) Пошлите ( 'Внутренняя ошибка сервера');});}); server.listen (4040); renderToString (приложение, {название: 'Some название', описание: 'Некоторые описание'}, (ERR, HTML) => {если (ERR) {console.error ( 'Ошибка в renderToString:', эээ); возвращение Рез. статус (500) Пошлите ( 'Внутренняя ошибка сервера');} res.send (HTML);}); }, ERR => {если (err.code === 404) возврата res.status (404) Пошлите ( 'Страница не найдена'); console.error (ERR); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); }); }); server.listen (4040); renderToString (приложение, {название: 'Some название', описание: 'Некоторые описание'}, (ERR, HTML) => {если (ERR) {console.error ( 'Ошибка в renderToString:', эээ); возвращение Рез. статус (500) Пошлите ( 'Внутренняя ошибка сервера');} res.send (HTML);}); }, ERR => {если (err.code === 404) возврата res.status (404) Пошлите ( 'Страница не найдена'); console.error (ERR); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); }); }); server.listen (4040); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); } Res.send (HTML); }); }, ERR => {если (err.code === 404) возврата res.status (404) Пошлите ( 'Страница не найдена'); console.error (ERR); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); }); }); server.listen (4040); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); } Res.send (HTML); }); }, ERR => {если (err.code === 404) возврата res.status (404) Пошлите ( 'Страница не найдена'); console.error (ERR); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); }); }); server.listen (4040);
dennis
1

голосов
0

ответ
550

Просмотры

Обслуживание экспресс-статические файлы не работают с расслоением от WebPack :(

поэтому у меня узел / экспресс-приложение, которое служит обратно bundle.js в комплекте с WebPack. Я стучал головой на этот вопрос в течение почти 4 ночи, и я больше не знаю. Я получаю неперехваченный SyntaxError: Неожиданный токен <ошибку как экспресс-статические промежуточного программное обеспечение не ловя запрос и обработки его. webpack.config.js: выход: {путь: build_dir, имя файла: 'bundle.js', // https://github.com/webpack/webpack-dev-middleware/issues/205 // НЕ ОСТАВЛЯЙТЕ publicPath из - - это будет приводить к ошибкам, если мы делаем publicPath: '/'}, экспресс-промежуточное программное обеспечение: вар serveStatic = требуется ( 'служат статическую') app.use (serveStatic (path.join (__ имя_директории, 'статика'))) app.use ( '/ расстояние', express.static ( 'расстояние')); app.use ( '/ статика', express.static ( 'статика')); \ index.html:
Brian Zhou
1

голосов
0

ответ
180

Просмотры

Webpack и Машинопись компиляции проекта нескольких каталогов

Я здесь еще раз, чтобы попросить о помощи, на этот раз в отношении WebPack и машинописи. У меня было много проблем с экспортом не определен, то кажется, что браузер не может понять, машинопись импорт / экспорт, поэтому люди предложили мне использовать Webpack. Я пытаюсь понять, как они работают совмещены, и более конкретно, в проекте разделены на разные папки и подпапки. Давайте предположим, что это моя структура проекта - MyProject / - SRC / - server.ts - игра / - Game.ts - Player.ts - статический / - / - JS game.ts - построить / // построить использование же структура ЦСИ / в моей первой попытке, я использовал Gulp компилировать TS в JS, и она работала так, как я хотел, он принял структуру SRC / и скомпилированы все как зеркало в нарастании / папке. Минус конечно проблемы экспорта, который, очевидно, Ждут» т позвольте мне разделить мой проект и импортировать различные классы мне нужно. Поэтому я дал попытаться WebPack, используя эту конфигурацию webpack.config.js Const путь = требуется ( «путь»); module.exports = {запись: {сервер: "./src/server.ts", игра: "./src/static/js/game.ts", gameClasses: [ "./src/game/Game.ts" "./src/game/Player.ts"]}, выход: {путь: path.resolve (__ имя_директории, "строить"), имя файла: "[имя] .js"}, решить: {модули: [ «node_modules "path.resolve (__ имя_директория," ./ ")], // Добавить '.TS' и' .tsx» как разрешаемое расширение. Расширения: [ ".webpack.js", ".web.js", "ts-", /node_modules/ws/lib/Validation.js 10: 22-47 @ ./node_modules/ws/lib/Receiver.js @ ./node_modules/ws/index.js @ ./node_modules/engine.io/lib/server. JS @ ./node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_linux_51.node Модуль синтаксического анализа не удалось: Неожиданный символ «» (1: 0) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файлов. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_linux_48.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 0) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_linux_47.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 0) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_linux_46.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 0) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_darwin_48.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 0) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_darwin_51.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 0) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_darwin_47.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 0) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_darwin_46.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 0) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_win32_48.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 2) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. (Исходный код опущен для этого двоичного файла) @ ./node_modules/uws ^ \. \ / UWS _. * $ @ ./Node_modules/uws/uws.js @ ./node_modules/engine.io/lib/server.js @. /node_modules/engine.io/lib/engine.io.js @ ./node_modules/socket.io/lib/index.js @ ./src/server.ts ПРЕДУПРЕЖДЕНИЕ в ./node_modules/uws/uws_win32_51.node модуль синтаксического анализа не удалось Неожиданный символ «» (1: 2) Вы, возможно, потребуется соответствующий загрузчик для обработки этого типа файла. /node_modules/express/lib/express.js @ ./node_modules/express/index.js @ ./src/server.ts немного изменить: святой Moly! server.js является 2MB, довольно тяжелым ... Интересно, почему ... Для справки, вот импорт в моем server.ts пусть выражает = потребовать ( «экспресс»); пусть путь = требуется ( «путь»); пусть приложение = экспресс (); пусть сервер = требуется ( 'HTTP') сервер (приложение). пусть Io = требуется ( 'socket.io') (сервер); и в моем game.js есть импорт импорта класса {} Игра с «./../../game/Game»; Что я делаю неправильно? Это правильный подход к достижению того, что я хочу (как выходная структуру из Глоток)? TS пусть экспресс = требуется ( 'экспресс'); пусть путь = требуется ( «путь»); пусть приложение = экспресс (); пусть сервер = требуется ( 'HTTP') сервер (приложение). пусть Io = требуется ( 'socket.io') (сервер); и в моем game.js есть импорт импорта класса {} Игра с «./../../game/Game»; Что я делаю неправильно? Это правильный подход к достижению того, что я хочу (как выходная структуру из Глоток)? TS пусть экспресс = требуется ( 'экспресс'); пусть путь = требуется ( «путь»); пусть приложение = экспресс (); пусть сервер = требуется ( 'HTTP') сервер (приложение). пусть Io = требуется ( 'socket.io') (сервер); и в моем game.js есть импорт импорта класса {} Игра с «./../../game/Game»; Что я делаю неправильно? Это правильный подход к достижению того, что я хочу (как выходная структуру из Глоток)?
K3nzie
1

голосов
1

ответ
1.4k

Просмотры

Как добавить «webpack.config.vendor.js» файл в моем угловом 5 проекта

Я создал угловое приложение Cli тогда я включил его с Dotnet Core 2 Web API проектом. Все работает хорошо. Когда я хотел бы добавить некоторые CSS и ссылки JavaScript на «webpack.config.vendor.js», я понял, что не существует какой-либо файл конфигурации для WebPack поэтому я гугле его и нашел «нг выталкивания». Эта команда генерируется файл webpack.config.js для меня, но я не знаю, как добавить «webpack.config.vendor.js» в моем проекте. Спасибо,
Kumail Jawadi
1

голосов
1

ответ
65

Просмотры

вя-кли: Я могу использовать @ в , но не

В вю-кли, так как он определен в webpack.base.conf.js, я могу использовать @, как это: но не так, как это в: фон: URL (@ / активы / logo.png); на самом деле я могу написать как URL (../ активы / logo.png), и она работает, но это делает URL зависит от пути компонента: Я бы переписать URL, если я перееду компоненты (в подкаталоге, например, ). Как решить эту проблему?
akai
1

голосов
0

ответ
24

Просмотры

Webpack: показать имена источника модуля файлы вместо их индексов в пачке

В Webpack связывайте каждый модуль предваряется комментарием, как это: / *** /}), / * 2 * / / *** / (функция (модуль, экспорт) {Индексы модулей в эти комментарии несколько полезны при анализе расслоение, но почему не печатают имена исходных файлов вместо цифр? есть ли вариант, который позволяет это? Конечно, я могу пойти с WebPack-анализом, но есть ли возможность сохранить имена исходных файлов прямо в пачке?
Boris Burkov
1

голосов
2

ответ
354

Просмотры

@ Сборник рассказов / Угловая не может загрузить файл SCSS по индексу историй

Я пытался использовать сборник рассказы для моего углового проекта, и я использую это руководство https://storybook.js.org/basics/guide-angular/ я использую рекомендуемые конфигурации для WebPack для Sass загрузчика для SCSS файлов и файл SCSS связанного к проекту работает отлично, но если я импортировать файл SCSS в истории index.ts файл, этот файл он не загружается. Рассказы / index.ts импорт {storiesOf} от '@ сборник рассказов / Угловая'; импорт {действие} от «@ сборник рассказов / аддон-акций»; импорт {VideoPosterComponent} от '../src/app/modules/ui-common/video-poster/video-poster.component'; // Этот SCSS он не загружен импорт»../src/styles.scss'; storiesOf ( 'Video Poster компонент', модуль) .add ( 'Видео Плакат с автором данных', () => ({компонент: VideoPosterComponent, реквизита: {название: " [ 'Сырой погрузчик', 'дерзость-погрузчик'],}); вернуть конфигурации; }; И, файл для моего СКСА компонента был загружен без проблем ЦСИ / приложение / модули / UI-общее / видео столбики / видео-poster.component.ts импорт {Component, OnInit, ввод} от «@ углового / ядра»; @Component ({селектор: 'приложение-видео-постер', templateUrl: './video-poster.component.html', styleUrls: [»./video-poster.component.scss'] // это были загружены без проблем }) экспорт класс VideoPosterComponent реализует OnInit {частное hostUrl = 'https://s3-eu-west-1.amazonaws.com/video.gallereplay.com/portfolio/clients'; частные BaseUrl = `$ {this.hostUrl} / Егермейстер / Cinemagraph_plain / 1920x1080`; @Input () общественное videoUrls = {стендовый: `$ {this.baseUrl} / cinemagraph.jpg`, mp4:` $ {this.baseUrl} / cinemagraph.mp4`, WebM: `$ {This.baseUrl} / cinemagraph.webm`,} @Input () публичное название = 'Пользовательский синемаграф Productions'; @Input () публичное подзаголовок = «эксклюзивный контент для бизнеса»; конструктор () {} ngOnInit () {}} Repository: https://github.com/gpincheiraa/storybook-components-sample запустить НПМ установить && НПМ запустить сборник рассказов для проверки сказочного бега. Что я делаю неправильно ??
1

голосов
0

ответ
59

Просмотры

Как сделать WebPack источник карту идемпотент

{ "Версия": 3, "источники": [ "WebPack: /// WebPack / самозагрузки c12c82c8d8662b069e00", ...} Хеш в конце WebPack: /// WebPack / бутстраповских изменяется с каждой сборки. Поэтому, когда CI работает нашу команду НОЙ сборки, чтобы увидеть, если изменения файлов это не удается.
1

голосов
0

ответ
126

Просмотры

ExtractTextPlugin Sass Loader Ошибка

Я "WebPack": "^ 1.14.0", "CSS-погрузчик": "^ 0.26.1" "дерзость-погрузчик": "^ 4.1.1". Я вижу addStyles.js консоль ошибок: 147 неперехваченным Ошибка: Не удалось найти цель стиля. Это, вероятно, означает, что значение параметра в «insertInto» является недействительным. на insertStyleElement (addStyles.js: 147) при createStyleElement (addStyles.js: 184) при addStyle (addStyles.js: 251) в addStylesToDom (addStyles.js: 116) в ../node_modules/style-loader/lib/addStyles. js.module.exports (addStyles.js: 67) на объекте ../ prompt.css (prompt.css d8f8: 12) в __webpack_require__ (самонастройки bbe7b5471983b5ec6c6f: 19) на объекте ../ prompt.js (prompt.js: 17) при __webpack_require__ (самонастройки bbe7b5471983b5ec6c6f: 19) при Object.3 (prompt.js: 696) Ниже мой конфигурационный файл WebPack пусть ExtractTextPlugin = требуется ( 'приточно-текст-WebPack-плагин'); {Тест: /\.s?css$/, погрузчик: ( "! CSS-погрузчик postcss-погрузчик" "стиль-погрузчик",) ExtractTextPlugin.extract}, плагины: [новый ExtractTextPlugin ( "CSS / styles.css", {allChunks: истинно})]
Ambarish Kumar
1

голосов
0

ответ
447

Просмотры

Как запустить функцию в Electron от процесса рендеринга в основном?

В настоящее время я пишу некоторые простые рамки плагина для электрона. Я требую файлов в процессе рендеринга. Это прекрасно работает для элементов пользовательского интерфейса, но я хотел бы добавить плагин, который запускает экспресс-сервер во время запуска. Это работает до тех пор, как BrowserWindow еще видна. После того, как я закрыть его, сервер выключается. Это в значительной степени указывает на то, что сервер был создан на процесс рендеринга. Идея, что у меня было экспортировать функцию под названием executeFunction в моем файле main.js, файл, который использует электрон, чтобы начать. Он просто вызывает функцию переданную ей. Я затем импортировать файл, используя константный {executeFunction} = требуется ( «электрон»). Remote.require (»./ главный) и передал свою функцию setupServer к нему. Для некоторых нечетных причин, он по-прежнему вызывается на визуализаторе, даже если я прохожу его к основному процессу перед вызовом функции. Любая идея, если то, что я пытаюсь сделать, это возможно? Вот соответствующие фрагменты кода: функция экспорта executeFunction (externalFunction) {попробуйте {externalFunction (); log.warn (? `, работающие на визуализатора $ {isRenderer}`); } Поймать (е) {console.log (е); }} Вот код настройки сервера: импорт выразить от «экспресса»; импорт graphqlHttp из 'экспресс-graphql'; импорт {buildSchema} от 'graphql'; константные {приложение} = требуется ( 'электрон') пульта дистанционного управления.; Const {executeFunction} = требуется ( 'электрон') remote.require (»./ главное). Журнал импорта из «электрон-журнал»; импорт isRen из «является-электрон-рендерер»; Функция экспорта по умолчанию setupServer () {сопза схема = buildSchema ( `Тип запрос {Привет: String}`); Const корень = {Привет: () => {Вернуться 'Hello World!'; }}; Const = expressApp выразить (); expressApp.use ( '/ graphql', graphqlHttp ({схемы, rootValue: корень, graphiql: истинно,})); log.warn ( `является рендерер $ {isRen}`); Сервер = Const expressApp.listen (4000); log.warn ( 'прослушивает порт 4000'); // убедитесь, чтобы закрыть сервер на окна-закрыто app.on ( 'бросить курить', () => {log.warn ( 'приложение закрывается, выключая сервер'); server.close ()}); } // запуск сервера executeFunction (() => {setupServer ();}); предупредить ( `это рендерер $ {isRen}`); Сервер = Const expressApp.listen (4000); log.warn ( 'прослушивает порт 4000'); // убедитесь, чтобы закрыть сервер на окна-закрыто app.on ( 'бросить курить', () => {log.warn ( 'приложение закрывается, выключая сервер'); server.close ()}); } // запуск сервера executeFunction (() => {setupServer ();}); предупредить ( `это рендерер $ {isRen}`); Сервер = Const expressApp.listen (4000); log.warn ( 'прослушивает порт 4000'); // убедитесь, чтобы закрыть сервер на окна-закрыто app.on ( 'бросить курить', () => {log.warn ( 'приложение закрывается, выключая сервер'); server.close ()}); } // запуск сервера executeFunction (() => {setupServer ();});
Sven
1

голосов
0

ответ
159

Просмотры

Как изменить путь вывода файла «sourcemap» для SCSS файлов в WebPack?

По какой-то причине, мои SCSS файлы названы после их полного пути в моих WebPack пучках: «/ имя-мой-пользователь / Users / код / ​​мой-приложение-имя / клиент / приложение / контейнеры / приложение / клиент / приложение / стили / Util / _globals.scss»Как и в этой строке, происходит в моем .js файлов других выходов и .map файлах, а затем отображается в закладке источников браузера. Без полного удаления sourcemaps, как я могу контролировать, как выглядит исходный путь? (Я могу просто отключить sourcemaps полностью к распределительным, но предпочел бы иметь больше контроля.) На самом деле, в этом примере, имеет часть пути к файлу он включен, и файл, который включен: «/ Users / my- имя-пользователя / код / ​​мои-приложение имя / клиент / приложение / контейнеры, где файл СКС импортируемое _globals.scss /app/client/app/styles/util/_globals.scss»я не нашел, как управлять тот. Я'
CmdrShepardsPie
1

голосов
1

ответ
27

Просмотры

JavaScript: условно включая файлы тестов

Я унаследовал WebAPP проект, который является одной HTML страницы с JQuery + дополнительные файлов JavaScript, которые импортируются в основной app.js. WebApp предназначен для встраивания в главном приложении. WebApp распространяется через конфигурацию WebPack, который компилирует bundle.js из всех файлов JavaScript и добавить HTML и CSS файл отдельно в связи с требованиями основного приложения. Все это работает хорошо, за исключением того, что, чтобы проверить веб-приложение автономно, мы включаем Testdata в app.js. импорт тд из ./testdata.js если ([мы в главном приложении]) {// сделать все необходимое, чтобы начать веб-приложение} еще {// автономный пусть TestData = td.getTestdata (); // запуск веб-приложение} В производственной версии я хочу, чтобы предотвратить Testdata, чтобы быть в комплекте с bundle.js. Я пытался импортировать testdata.js в предложении еще, но это решает ошибку. Я попытался переписать testdata.js с пустой, но это должно быть сделано в WebPack конфигурации, и я не могу найти, где добавить «предварительное расслоение» действия. Каков наилучший подход справиться с этим?
hepabolu
1

голосов
0

ответ
438

Просмотры

RxJs 5 - TreeShaking с WebPack 4

Я использую RxJS 5,5 и я импортирование операторов, как: импорт {mergeMap} от «rxjs / операторов»; импорт {fromPromise} от 'rxjs / наблюдаемом / fromPromise'; Так как я модернизировал Webpack 3 -> 4, я вижу, что весь пакет rxjs импортируется: Похоже, конфигурации псевдонимов в WebPack больше не будет работать: константное rxPaths = требуется ( «rxjs / _esm5 / путь-отображение»); постановляю: {псевдоним: rxPaths (), расширения: [ '.js',' .jsx ']},
Tomasz Mularczyk

Просмотр дополнительных вопросов

Связанные вопросы