WebPACK-dev-server - instalare, configurat și de a gestiona

  • toate
  • backend
  • Frontend
  • Fluxul de lucru
  • desen
  • miscelaneu
  • limbaje de programare
    • # 3 - Cum de a începe (System.js)

    • # 4 - Cum de a începe (Angular CLI)

    • # 2 - Cum de a începe (plnkr.co)

    • # 5 - Asociația. Mulți-la-mulți

    • Ce este nou pe hosting pay-per-resursă «Elasticweb»?

    • # 7 - Sincronizarea de proiect cu un server de la distanță în PhpStorm. Implementare.

    • # 3 - Cum de a începe (System.js)

    • # 4 - Cum de a începe (Angular CLI)

    • # 2 - Cum de a începe (plnkr.co)

    • # 1 - Cum de a începe (etichetă de script)

    • # 14 - File-încărcător atunci când se lucrează cu imagini

    • # 13 - UglifyJsPlugin - plugin pentru minifitsirovaniya js-cod

    • # 12 - ProvidePlugin - mufă, plug-in tine

    • # 11 - CommonsChunkPlugin - plug-in care face codul comun al css- și JS-fișiere

    • # 1 - lecție introductivă

    • # 4 - grila de modulare în Photoshop

    • # 5 - 5 chips-uri Photoshop pentru web design.

    • # 5 - Un lider eficient al IT-proiecte

    • # 4 - Scrum - o examinare detaliată a metodologiei

    • # 4 - Creați o specificație tehnică pentru aplicații mobile

    • # 3 - filetata sau metoda clasica de management de proiect

    • # 3 - Cum de a începe (System.js)

    • # 4 - Cum de a începe (Angular CLI)

    • # 2 - Cum de a începe (plnkr.co)

    • # 1 - Cum de a începe (etichetă de script)

      • toate
      • DevShow
      • Loftcast
      • Loftnews
      • LoftSchool
      • LoftVlog
      • interviu
        • # 23: joc de programare!

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

        • # 23: joc de programare!

        • # 23: Cum să caute un loc de muncă ca un dezvoltator de web?

        • # 22: Top popup-uri, tooltip și ferestre modale

        • # 21: Muzica pentru programatori - ce să asculte, atunci când scrie codul?

        • Loftcast # 3 - browsersync, Marksheet, text sublima vs atom vs paranteze

        • Loftcast # 2 - Modele Responsive, Atom, PostCsskov

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

        • Samsung S8, Apple cu plată, Made de Google, Samsung cu plată, PPAP

        • 8 iPhone, YouTube Go, Android plus sistemul de operare Chrome, React

        • explodeaza Samsung, Bootstrap Deprecated, iPhone 7, Apple Watch, iOS 10

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

        • Ca un programator pentru a petrece iarna în Tae?

        • Ca specialiști IT pentru a face de la distanță și de a trăi oriunde în lume?

        • ODesk - strategii de intrare, limba, profilul și depunerea

        • Cum să treacă o perioadă de probă? Cele mai importante sfaturi de la fondatorii LoftSchool

        • Oras Bucuresti, LoftSchool la o sedinta foto, pregătirea pentru LBMM

        • De la St. Petersburg la Moscova. O vizită Avito. Meetup de gătit!

        • În cazul în care nu Loft Echipa

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

        • Gleb Kushedov, fondatorul Epic Talent: Educație în domeniul IT

          Bună ziua tuturor! Numele meu este Dmitri Kovalchuk. Arăți Loftskul. Vom continua să studiem WebPACK.

          Pentru mai mult confort de dezvoltatori în WebPACK oficial de documentare ne-am propus utilizarea „-WebPACK dev-server“. După cum este construit, iar livereload server local ( "Live Restart browser-ul"). WDS, de asemenea, vă rugăm să vă cu opțiuni flexibile de configurare. Separat doresc să evidențieze două puncte:

          1. WebPACK-dev-server de lucrări „în memorie“ ( „server care rulează în memorie“) - aceasta nu creează în fișierele directorul de proiect compilate.

          2. „Înlocuirea modulului Hot (HMR)“ - vă permite să actualizați module de pagini individuale, fără repornirea completă acestuia. Putere maximă poate fi simțit atunci când este utilizat cu React.

          1. Instalați și rulați WebPACK-dev-server

          Stabilim WebPACK-dev-server și salvați-l în package.json.

          fire add WebPACK - dev - Server - D

          Pentru a integra WebPACK-dev-server în proiectul nostru, trebuie sa definim un nou NPM-script (în fișierul package.json).
          Noi o numim «Start». Un script care ruleaza WebPACK cu supraveghere se înlocuiește cu un WebPACK de start simplu, fără supraveghere. Sarcina lui - pur și simplu pentru a construi proiectul, iar numele pe care îl va da corespunzătoare - «construi».

          Vom continua. În browser-ul dvs., putem vedea site-ul nostru, la fel cum a fost cu serverul static.
          Cu toate acestea, acum în arsenalul nostru a apărut livereload. Să încercăm să facem modificări la șabloane sau js-fișiere.

          Ștergeți dosarul și de a construi din nou, asigurați-vă că - nu există fișiere compilate în directorul de proiect, care este, WDS „colectează“ proiectul direct în memorie.

          WDS nu este recomandat pentru Productions, deci verificați colectate folosind WebPACK de asamblare putem, ca și mai înainte, cu ajutorul «nodului-static».

          2. Configurarea de bază a WebPACK-dev-server

          În WDS, așa cum am menționat mai devreme, există un număr foarte mare de setări. Toate aceste setări trebuie să fie plasate în obiectul „devServer“, care este proprietatea modulului, exportat WebPACK de configurare. De exemplul nostru va fi suficient pentru a lua în considerare o altă proprietate „statistici“. Asociați-l o valoare de „erori numai“. Acum, când începe WebPACK-dev-server, în consola vom vedea mult mai puține informații (și anume, „numai erorile“).

          articole similare