Extract-text-plugin для підключення css на видеокурсе від loftschool

# 3 - Як задавати питання і відповідати на них на співбесіді

# 6 - Що робити після співбесіди

# 7 - Поняття модуля

# 9 - Читання і запис у файли

# 8 - Поняття винятків

# 6 - Закріпимо знання

# 5 - Як почати працювати (Angular Class Webpack)

# 3 - Як почати працювати (System.js)

# 4 - Як почати працювати (Angular CLI)

# 2 - Як почати працювати (plnkr.co)

# 14 - File-loader при роботі з зображеннями

# 13 - UglifyJsPlugin - плагін для мініфіцірованія js-коду

# 12 - ProvidePlugin - плагін, що включає модулі самостійно

# 1 - Вступний урок

# 4 - Модульна сітка в Photoshop

# 5 - 5 фішок фотошопа для веб-дизайну.

# 3 - Як задавати питання і відповідати на них на співбесіді

# 6 - Що робити після співбесіди

# 2 - Де розміщувати резюме і шукати роботу мрії

# 5 - Як почати працювати (Angular Class Webpack)

# 3 - Як почати працювати (System.js)

# 4 - Як почати працювати (Angular CLI)

# 2 - Як почати працювати (plnkr.co)

• Усе
• DevShow
• Loftcast
• Loftnews
• LoftSchool
• LoftVlog
• інтерв'ю

• • # 38: Про дівчат в програмуванні та чесності. Frontend Юність в гостях у loftblog

  • # 37: Микола Громов: про фрілансі і викладанні в html academy і Epic Skills

  • # 35: Як потрапити у велику IT компанію? Життя в Selectel. Поради від HR

• • # 38: Про дівчат в програмуванні та чесності. Frontend Юність в гостях у loftblog

  • # 37: Микола Громов: про фрілансі і викладанні в html academy і Epic Skills

  • # 35: Як потрапити у велику IT компанію? Життя в Selectel. Поради від HR

• • Loftcast # 3 - browsersync, marksheet, sublime text vs atom vs brackets

  • Loftcast # 2 - Responsive Patterns, Atom, PostCssков

  • Loftcast # 1 - dotdotdot.js. webpack, plainjs.com

• • Samsung S8, Apple Pay, Made by Google, Samsung Pay, PPAP

  • iPhone 8, YouTube Go, Android plus Chrome OS, React

  • Samsung вибухає, Bootstrap Deprecated, iPhone 7, Apple Watch, iOS 10

  • LoftNews # 30 - Fiat 124 Spider Sport, auto.ru, Google Maps

• • Як програмісту провести зимівлю в Таї?

  • Як IT-фахівця заробляти віддалено і жити в будь-якій точці світу?

  • Upwork - стратегії входу, мова, профіль і подача заявок

  • Як пройти випробувальний термін? Топ рад від засновників LoftSchool

• • Москва Сіті, LoftSchool на фотосесії, підготовка до LBMM

  • З Пітера в Москву. В гостях у Авито. Готуємо MeetUp!

  • Де працює Loft Team

• • NIMAX. Екскурсія в Діджитал світ. Інтерв'ю з Микитою Міхеенковим

  • Гліб Кушедов, засновник Epic Skills: Освіта в IT

    Всім привіт! Мене звуть Ковальчук Дмитро. Ви дивіться Лофтскул. Ми продовжуємо вивчати Webpack 2.

    Важливе зауваження! Тільки вам самим вирішувати, як саме довантажувати ваші стилі в ваш додаток: інлайн в html або окремим файлом. Тут немає чітких законів. В академічних цілях для мого програми я вирішив зробити так.

    Для розробки я буду підключати CSS інлайн прямо в html, що мною і було зроблено на попередніх уроках.
    А для продакшена підключу по-старому, в вигляді окремих файлів. Для цього я навіть створю окремий конфіг-файл. Але всьому свій час.

    Установка плагіна extract-text-plugin

    Давайте почнемо з установки плагіна.

    yarn add extract - text - webpack - plugin - D

    Створимо файл для конфігурації.

    touch webpack / css. extract. js

    const ExtractTextPlugin = require ( 'extract-text-webpack-plugin');

    module. exports = function (paths)

    use. ExtractTextPlugin. extract (

    use. [ 'Css-loader'. 'Sass-loader'].

    use. ExtractTextPlugin. extract (

    new ExtractTextPlugin ( './css/[name].css').

    Пояснення до коду

    Фактично створення і підключення окремих css-файлів виконує extract-text-plugin, тобто він замінює собою style-loader. Однак в тих випадках, коли extract-text-plugin не може виконати свою роботу, буде застосований fallback: style-loader. Так рекомендується писати в документації.

    Далі зверніть увагу на publicPath - його обов'язково потрібно вказати для того, щоб шляхи до картинок для фонових зображень, зазначені в css-файлах, були правильними після складання.

    Як я говорив вище, саме в моєму прикладі, я підключу extractCSS саме в продакшен. Не обов'язково у вас буде також.

    Перед тим, як ми перейдемо в браузер, зверніть увагу ось на що.

    В папці build у нас поступово вимальовується готовий "класичний" набір файлів:

    Відкриємо браузер і переконаємося, що і тут все працює, як треба. Перевіримо вихідний код. ... Відмінний.
    Робимо наш традиційний Ком.

    Матеріали до уроку:

    
    

    Основи написання макросів в Excel

    

    Створення Landing Page в програмі Adobe Muse

    Схожі статті

    • Альянстелеком - настройка обладнання для нового типу підключення