webpack- все статьи тега


Загрузка шрифтов с помощью Webpack и font-face

Я пытаюсь загрузить шрифт в мой CSS-файл с помощью @font-face, но шрифт никогда не загружается. Это моя структура каталогов. Затем в webpack.config.js у меня есть загрузчик, чтобы получить шрифты. var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: 'eval', entry: [ "./index.js" ], output: { path: __dirname+"/build", filename: "main.js" }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin(), ...

Webpack html-webpack-плагин загрузки фавиконов в шаблон

Я использую Webpack с html-webpack-plugin и их предоставленным шаблоном. Я хочу добавить список фавиконов в заголовок: <link rel="apple-touch-icon" sizes="57x57" href="<%= htmlWebpackPlugin.extraFiles.apple-touch-icon-57x57 %>"> <link rel="apple-touch-icon" sizes="60x60" href="<%= htmlWebpackPlugin.extraFiles.favicons.fav60%>"> <link rel="apple-touch-icon" sizes="72x72" href="<%= htmlWebpackPlugin.extraFiles.favicons.fav72%>"> <link rel="apple-touch-icon ...

Компиляция react с синтаксической ошибкой webpack

Я немного новичок в webpack с загрузчиком babel и eslint и я пытаюсь скомпилировать очень простое приложение и я получаю эту странную синтаксическую ошибку, которую я не могу понять Это мой индекс.js, где я получаю ошибку компиляции const store = configureStore() render( <Router> <Root store={ store } /> </Router>, document.getElementById('console_root') ) И это ошибка, которую я получаю: ERROR in ./src/index.js Module build failed: SyntaxError: Unexpected to ...

Webpack-фоновые изображения не загружаются

Я довольно новичок в webpack, но у меня возникли некоторые проблемы с css-загрузчиком или загрузчиком файлов. Я пытаюсь загрузить фоновое изображение, но оно работает не совсем правильно. Фоновое изображение не отображается, хотя devtools показывают стиль background-image. Если я копирую стиль background-image в блок element.style, все работает нормально. Может, я где-то совершаю глупую ошибку? Тег body должен иметь фоновое изображение. Стиль появляется в инструментах разработчика и отсутст ...

Настройка Airbnb ESLint с React и Webpack

Я пытаюсь настроить пылеобразования со стандартами на JavaScript на Airbnb на мой проект среагировать, он использует webpack. Обновлено последними пакетами на основе комментариев. "babel-eslint": "^6.1.2", "eslint": "^3.2.2", "eslint-config-airbnb": "^10.0.0", "eslint-plugin-import": "^1.12.0", "eslint-plugin-jsx-a11y": "^2.0.1", "eslint-plugin-react": "^6.0.0", "jshint": "^2.9.2", "jshint-loader": "^0.8.3", "json-loader": "^0.5.4", У меня также есть предзагрузчик в конфигурации webpack pr ...

Путь узла выдает ошибку при запуске NPM в windows 10

Я пытаюсь построить среднее приложение Todo, следуя https://github.com/michaelcheng429/super-mean-stack Пакет.json { "name": "ToDoThoughts", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "NODE_PATH=$NODE_PATH:./app node server", "dev": "npm start & webpack-dev-server --progress --colors" }, "license": "ISC", "dependencies": { "angular": "1.4.12", "angular-ui-router": "0.3.1", "body-parser": "1.15.2", "bootstrap": "3.3.7", ...

Как настроить и использовать jQuery с webpack

У меня есть очень простой проект для тестирования функции jQuery с webpack. Однако я столкнулся с ошибками на этапе связки. Вот ошибки: ERROR in ./~/jQuery/lib/node-jquery.js Module not found: Error: Cannot resolve module 'jsdom' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib @ ./~/jQuery/lib/node-jquery.js 5:13-29 ERROR in ./~/jQuery/lib/node-jquery.js Module not found: Error: Cannot resolve module 'xmlhttprequest' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_mo ...

Как сделать IntelliJ IDEA resolve webpack requires out of node modules directory?

IntelliJ не может разрешить модули javascript, вызываемые с помощью Webpack requires, которые не находятся в каталоге node_modules Представьте себе такую структуру проекта: `- project |- node_modules | `- react | `- addons.js |- webpack.config.js |- util | `- tool.js `- src |- components | `- uno.jsx `- two.jsx Это мой webpack config // webpack.config.js var path = require('path'); module.exports = { resolve: { root: [ path.resol ...

Как загрузить изображения, используемые в таблице стилей sass в webpack?

Я использую Webpack для связывания моих модулей и использую sass для стилизации в приложении на основе react. Используя отдельную таблицу стилей, я устанавливаю фоновое изображение компонента и загружаю эту таблицу стилей в index.js. Все стили в таблице стилей применяются к этому компоненту , кроме фонового изображения. Вот мой образец таблицы стилей $bg-img: url('/img/bg.jpg'); .show { position: relative; background: $black $bg-img center center; width: 100%; height: 100% ...

Как я могу создать загрузчик для webpack, который предоставляет все исходники через функцию?

Я хотел бы иметь загрузчик, который собирает все источники css и позволяет мне получить все содержимое в функции. Вот так: Webpack config module: { loaders: [ {test: /.css$/, loader: 'my-loader'} ] } JS файл A (foo.js) import './foo.css'; JS файл B (bar.js) import './bar.css'; JS файл C (app.js) import './app.css'; import getAllCSSContents from 'my-loader'; const css = getAllCSSContents(); Где getAllCSSContents вернет все содержимое CSS из foo.css, bar.css и app.css ...

НПМ и Bower, так и Browserify и залпом и хрюкать и Webpack

я пытаюсь обобщить свои знания о самых популярных менеджерах пакетов JavaScript, bundlers и task runners. Пожалуйста, поправьте меня, если я ошибаюсь: npm & bower менеджеры пакетов. Они просто загружают зависимости и не знают, как строить проекты самостоятельно. То, что они знают, называется webpack/gulp/grunt после загрузки всех зависимостей. bower как npm, но строит сплющенные деревья зависимостей (в отличие от npm Что делать это рекурсивно). Значит npm извлекает зависимости для каждой ...

Передача зависимых от среды переменных в webpack

Я пытаюсь преобразовать угловое приложение из gulp в webpack. в gulp я использую gulp-preprocess для замены некоторых переменных на html-странице (например, имя базы данных) в зависимости от NODE_ENV. Каков наилучший способ достижения аналогичного результата с помощью webpack? ...

Как создать исходные карты при использовании babel и webpack?

Я новичок в webpack, и мне нужна помощь в настройке для создания sourcemaps. Я бегу webpack serve из командной строки, которая успешно компилируется. Но мне действительно нужны исходные карты. Это мой webpack.config.js. var webpack = require('webpack'); module.exports = { output: { filename: 'main.js', publicPath: '/assets/' }, cache: true, debug: true, devtool: true, entry: [ 'webpack/hot/only-dev-server', './src/components/main.js' ], stats: { color ...

Как добавить шрифт-awesome в проект Angular 2 + CLI

Я использую угловой 2+ и угловой CLI. Как добавить font-awesome в мой проект? ...

Что такое замена горячего модуля в Webpack?

Я читал несколькостраницы о горячей замене модуля в Webpack. Есть даже образец приложение это использует. Я вот читаю все это и до сих пор не взяли. Что я могу с ним сделать? Предполагается ли его использовать только в разработке, а не в производстве? Это похоже на нагрузку на печень, но вы должны справиться с этим сами? Интегрирован ли WebpackDevServer с ним в некоторых путь? предположим, я хочу обновить мой CSS (одна таблица стилей) и JS модули, когда я сохраняю их на диск, без перезагруз ...

Webpack.config как просто скопировать индекс.html в папку dist

Я пытаюсь автоматизировать активы, входящие в /dist. У меня есть следующая конфигурация.js: module.exports = { context: __dirname + "/lib", entry: { main: [ "./baa.ts" ] }, output: { path: __dirname + "/dist", filename: "foo.js" }, devtool: "source-map", module: { loaders: [ { test: /.ts$/, loader: 'awesome-typescript-loader' }, { test: /.css$/, loader: "style-loader!css-loader" } ] }, resolve: { // you can ...

Разрешение требуемых путей с помощью webpack

Я все еще не понимаю, как разрешить пути модуля с помощью webpack. Теперь я пишу: myfile = require('../../mydir/myfile.js') но я хотел бы написать myfile = require('mydir/myfile.js') Я думал, что разрешить.псевдоним может помочь, так как я вижу аналогичный пример с помощью { xyz: "/some/dir" } как псевдоним, то я могу require("xyz/file.js"). но если я установлю свой псевдоним в { mydir: '/absolute/path/mydir' },require('mydir/myfile.js') не будет работать. Я чувствую себя глупо, потому ...

Как разрешить webpack-dev-server разрешать точки входа из react-router

Я создаю приложение, которое использует webpack-dev-server в разработке вместе с react-router. кажется, что webpack-dev-server построен вокруг предположения, что у вас будет общедоступная точка входа в одном месте (т. е."/"), тогда как react-router позволяет использовать неограниченное количество точек входа. Я хочу воспользоваться преимуществами webpack-dev-сервера, особенно функцией горячей перезагрузки, которая отлично подходит для производительности, но я все еще хочу иметь возможность заг ...

Предоставьте jQuery для реального объекта окна с помощью Webpack

Я не хочу подвергать объект jQuery глобальному объекту окна, который доступен внутри консоли разработчика в браузере. Теперь в моей конфигурации webpack у меня есть следующие строки: plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] эти строки добавляют определения jQuery к каждому файлу в моих модулях webpack. Но когда я строю проект и пытаюсь получить доступ к jQuery в консоли разраб ...

Как создать несколько путей вывода в конфигурации Webpack

кто-нибудь знает, как создать несколько путей выхода в webpack.конфиг.js файл? Я использую bootstrap-sass, который поставляется с несколькими различными файлами шрифтов и т. д. Для обработки webpack я включил file-loader, который работает правильно, однако файлы, которые он выводит, сохраняются в путь вывода, который я указал для остальных моих файлов: output: { path: __dirname + "/js", filename: "scripts.min.js" } Я хотел бы достичь чего-то, где я могу, возможно, посмотре ...