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 ...