vedees / webpack-template Goto Github PK

Привет! Я решила заюзать твой темплейт для реакта и столкнулась со следующей ошибкой:

Failed to compile.
unable to locate 'C:\Users\username\Desktop\webpack-react-template\src\assets\img' at 'C:\Users\username\Desktop\webpack-react-template\src\assets\img***'

Ошибка проявляется только в тех случаях, когда в папке img пусто.

Привет!
Подскажи, а как сделать чтоб папка dist собиралась при dev сборке?
Это надо чтоб бекендеры тоже могли отслеживать изменения в стилях и скриптах. Когда он себе подключает app.css и app.js и правит в файлах фронта.
Спасибо!

Please add vue router in it

Здравствуйте!
Пытаюсь загрузить эту сборку с гита.
Прописал "git clone https://github.com/vedees/webpack-template webpack-template", затем "cd webpack-template",
пишу "npm install", а мне выбивает кучу ошибок. Что-то пошло не так?
Вот ссылка на логи: https://1drv.ms/t/s!AlJBObVj2UYspqBsCMfanT9DybmuJA?e=iirmCr

Модуль css-mqpacker устарел, его автор отказался от дальнейшей поддержки.

После разделения конфигов вебпака в 3 видео появилась такая ошибка:
ERROR in ./src/index.js
Module not found: Error: Can't resolve '/css/main.css' in 'D:\Development\Presentation\src'
@ ./src/index.js 2:0-22

ERROR in ./src/index.js
Module not found: Error: Can't resolve '/scss/main.scss' in 'D:\Development\Presentation\src'
@ ./src/index.js 3:0-24

очевидно тут про недоступность файлов, поменял содержимое index.js таким образом
import './css/main.css' import './scss/main.scss' window.Vue = require('vue')

после этого ошибка поменялась на:

ERROR in ./src/scss/main.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

@import "utils/libs";
| @import "utils/vars";
| @import "utils/mixins";
@ ./src/index.js 3:0-25

ERROR in ./src/css/main.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

.wrapper {
| display: flex;
| }
@ ./src/index.js 2:0-23

проблема с лодером, но что именно не так не понятно

Заметил, что при билде получаются относительные пути и файлы не находятся.
Заменил без точки
publicPath: "/"
на с точкой
publicPath: "./"

Все заработало как надо.

I'm going onto your guide for local fonts but I can't see my font on dev and prod UI.

Fonts are copying by config:

new CopyWebpackPlugin({
      patterns: [
        // `shared/img` to `dist/static/img`
        {
          from: `${defines.src}/shared/img`,
          to: `${defines.dist}/${defines.static}/img`
        },

        // others:
        // `shared/fonts` to `dist/static/fonts`
        {
          from: `${defines.src}/shared/fonts`,
          to: `${defines.dist}/${defines.static}/fonts`
        },
      ]
    }),

I've copied fonts into src/shared/fonts/ and added file src/app/styles/fonts.scss:

@font-face {
  font-family: "PTRootUI";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/PTRootUIMedium.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "PTRootUI";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/PTRootUIBold.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

And finally I've added it in globals.scss just like in your guide:

font-family: "PTRootUI", sans-serif !important;

On web page devtools I see the name of font "PTRootUI", but it's not my font, it's just a system sans-serif font. What am I doing wrong?

All another stuff working great (styles, images, include import images in scss files etc.). Fonts are copying into build (dist folder) but I can not see it on page.

The error occurs after updating the plugin from version 5.1.1 to the latest version 6.0.2:

step 1 - include fonts like example - http://joxi.ru/zANve3GUj3exZA
step2 - copy fonts to folder - http://joxi.ru/Grq5YaxtGv3Y8r
step 3 - npm run build, and i am error - https://pastebin.com/raw/vQDv6Bby

help please

Вместо
const PATHS = {
src: path.join(__dirname, '../src'),
dist: path.join(__dirname, '../dist'),
assets: 'assets/'
}
должно быть
const PATHS = {
src: path.join(__dirname, './src'),
dist: path.join(__dirname, './dist'),
assets: 'assets/'
}

лишняя точка и появляется ошибка