Extract-text-plugin pentru conectarea css la cursul video de la loftschool

  • toate
  • backend
  • Frontend
  • Fluxul de lucru
  • desen
  • miscelaneu
  • Limbi de programare
    • # 3 - Cum să adresați întrebări și să le răspundeți la un interviu

    • # 6 - Ce trebuie să faceți după interviu







    • # 7 - Conceptul modulului

    • # 9 - Citirea și scrierea fișierelor

    • # 8 - Conceptul de excepții

    • # 6 - Să rezolvăm cunoștințele

    • # 5 - Cum să începeți (Webpack din clasa unghiulară)

    • # 3 - Cum să începeți (System.js)

    • # 4 - Cum să începeți (CLI unghiular)

    • # 2 - Cum să începeți (plnkr.co)

    • # 14 - Încărcător de fișiere când lucrați cu imagini

    • # 13 - UglifyJsPlugin - plugin pentru minificarea codului js

    • # 12 - ProvidePlugin - Plug-in, plugin-uri pe cont propriu

    • # 1 - Lecție introductivă

    • # 4 - Grila modulară în Photoshop

    • # 5 - 5 jetoane de Photoshop pentru web design.

    • # 3 - Cum să adresați întrebări și să le răspundeți la un interviu

    • # 6 - Ce trebuie să faceți după interviu

    • # 2 - Unde să postați un CV și să căutați un loc de muncă visat

    • # 5 - Cum să începeți (Webpack din clasa unghiulară)

    • # 3 - Cum să începeți (System.js)

    • # 4 - Cum să începeți (CLI unghiular)

    • # 2 - Cum să începeți (plnkr.co)

      • toate
      • DevShow
      • Loftcast
      • Loftnews
      • LoftSchool
      • LoftVlog
      • interviu
        • # 38: Despre fetele în programare și onestitate. Frontend Youth găzduit de loftblog

        • # 37: Nikolai Gromov: despre freelancing și predare în academia html și abilitățile epice

        • # 35: Cum să ajungeți într-o companie IT mare? Traiul în Selectel. Sfaturi din partea HR

        • # 38: Despre fetele în programare și onestitate. Frontend Youth găzduit de loftblog

        • # 37: Nikolai Gromov: despre freelancing și predare în academia html și abilitățile epice

        • # 35: Cum să ajungeți într-o companie IT mare? Traiul în Selectel. Sfaturi din partea HR

        • Loftcast # 3 - browsere de sincronizare, foaie de calcul, text sublime vs atom vs paranteze

        • Loftcast # 2 - Modele responsabile, Atom, PostCss

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







        • Samsung S8, Apple Pay, realizat de Google, Samsung Pay, PPAP

        • iPhone 8, YouTube Go, Android și Chrome OS, React

        • Samsung explodează, Bootstrap Deprecated, iPhone 7, Apple Watch, iOS 10

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

        • Cum poate un programator să petreacă iarna în Tae?

        • Cum poate un specialist IT să câștige de la distanță și să trăiască oriunde în lume?

        • Upwork - strategii de intrare, limbă, profil și depunerea de aplicații

        • Cum să treci perioada de probă? Top sfaturi de la fondatorii LoftSchool

        • Orașul Moscova, LoftSchool la fotografia, pregătindu-se pentru LBMM

        • De la Sankt Petersburg la Moscova. Vizitând Avito. Gătit MeetUp!

        • Unde funcționează echipa Loft

        • Nimax. Excursie la lumea digitală. Interviu cu Nikita Mikheyenkov

        • Gleb Kushedov, fondator al Abilităților Epice: Educație în IT

          Buna ziua tuturor! Numele meu este Dmitriy Kovalchuk. Te uiți la Loftsculus. Continuăm să studiem Webpack 2.

          Notă importantă! Doar tu decideți cum să încărcați stilurile în aplicația dvs.: inline în html sau într-un fișier separat. Nu există legi clare. În scopuri academice, pentru cererea mea, am decis să fac acest lucru.

          Pentru dezvoltare, voi conecta CSS direct în html, ceea ce am făcut în lecțiile anterioare.
          Și pentru producție, mă voi conecta în mod vechi, ca fișiere separate. Pentru aceasta, chiar creez un fișier de configurare separat. Dar totul are timpul.

          Instalarea plug-in-extract-text-plugin

          Să începem prin instalarea pluginului.

          fire adaugă extract - text - webpack - plugin - D

          Creați un fișier pentru configurație.

          atingeți webpack / css. extract. js

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

          modul. export = funcție (căi)

          utilizați. ExtractTextPlugin. extract (

          utilizați. [ 'Css-loader'. 'Sass-încărcător'].

          utilizați. ExtractTextPlugin. extract (

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

          Explicarea codului

          De fapt, crearea și conectarea fișierelor css individuale se realizează prin extract-text-plugin, adică înlocuiește încărcătorul de stil. Cu toate acestea, în cazul în care plugin-text-plugin-ul nu își poate efectua activitatea, se va aplica o rezervă: încărcătorul de stil. Deci, este recomandat să scrieți în documentație.

          Apoi, trebuie să fiți atenți la publicPath - trebuie să fie specificat pentru ca căile de imagine pentru imaginile de fundal specificate în fișierele css să fie corecte după asamblare.

          Așa cum am spus mai sus, este în exemplul meu, voi plug extractCSS în producție. Nu neapărat veți și voi.

          Înainte de a merge la browser, acordați atenție acestui lucru.

          În folderul de construire, vom vedea treptat un set "clasic" de fișiere:

          Deschideți browserul și asigurați-vă că totul funcționează aici. Să verificăm codul sursă. ... Excelent.
          Facem comiterea noastră tradițională.

          Materiale pentru lecție:

          Extract-text-plugin pentru conectarea css la cursul video de la loftschool

          Extract-text-plugin pentru conectarea css la cursul video de la loftschool

          Noțiuni de bază despre scrierea macrocomenzilor în Excel

          Extract-text-plugin pentru conectarea css la cursul video de la loftschool

          Crearea paginii de destinație în Adobe Muse







          Articole similare

          Trimiteți-le prietenilor: