Publicat, de asemenea, în blog tehnologic

Acesta este un ghid menit să vă ajute să vă ușurați fluxul de lucru de dezvoltare și să economisiți timp folosind o grămadă de instrumente minunate despre care ați citit pe internet (React Hot Loader sună vreun clopot?)

De asemenea, este menit să vă ajute cu unele dintre cele mai frecvente probleme întâlnite în timpul utilizării Webpack – și să economisiți ceva timp în proces înainte de a începe să vă trageți părul. La urma urmei, vrei să mergi repede și să rupi alte probleme importante.

Șansele sunt că ați întâmpinat una sau mai multe dintre următoarele probleme:

  • Cum pot avea mai multe intrări?
  • Cum schimb module?
  • Una dintre bibliotecile / pluginurile pe care le folosesc depinde de jQuery, cum mă descurc?
  • Eu tot primesc $ nu este definit sau vreo prostie de genul asta într-unul din pluginurile jQuery
  • Împachetarea mea durează definitiv.
  • Am citit o grămadă de tutoriale despre Cum se înlocuiește modulul pentru ReactJS și cred că este foarte interesant, dar continuu să întâmpinați erori în timp ce îl configurați.

Dacă întâmpinați aceste dificultăți, terminați acest articol înainte de a recurge la postarea uneia dintre aceste întrebări pe Stack Overflow.

Webpack pentru Fast and Furious

Presupun că știți deja despre avantajele Webpack și pentru ce este folosit. Dacă sunteți începător și nu aveți nici o idee despre ce este Webpack, vă recomand cu tărie să citiți despre el Aici.

Presupun, de asemenea, că construiți o aplicație web și nu doar o pagină statică, ceea ce înseamnă că veți avea un server web care rulează pe Node și Express. Cel mai probabil folosiți și un driver NodeJS pentru a vorbi cu baza de date – probabil MongoDB sau Redis.

Deci, iată ce este tipic webpack.config.js se pare ca:

/**
 * @Author Ashwin Hariharan
 * @Details Webpack config file for adding new vendors, defining entry points and shimming modules. 
 */

var webpack = require('webpack');
var path = require("path");

var lib_dir = __dirname + '/public/libs',
    node_dir = __dirname + '/node_modules';
   // bower_dir = __dirname + '/bower_components'

var config = {
    resolve: {
        alias: {
            react: node_dir + '/react',
            reactDom: lib_dir + '/react-dom',
            jquery: lib_dir + '/jquery-1.11.2.min.js', 
            magnificPopup: lib_dir + '/jquery.magnific-popup.js' //JQuery Plugin
        }
    },   

    entry: {
        app: ['./public/src/js/app-main'],
        vendors: ['react','reactDom','jquery','magnificPopup']
    },

    output: {
        path: path.join(__dirname, "public"),
        filename: "dist/js/[name].bundle.js"
    },

    plugins: [
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            'window.jQuery': "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'dist/js/vendors.js', Infinity),
    ],
    
    module: {
        noParse: [
            new RegExp(lib_dir + '/react.js'),
            new RegExp(lib_dir +'/jquery-1.11.2.min.js')
        ],
        loaders: [
            { 
                test: /.js$/, 
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }, 
        ]
    }
};

module.exports = config;

Această configurație presupune că ați utilizat unele module nod și versiunea dist a puține biblioteci salvate în interiorul unui public / libs pliant. Acum, dacă ați citit alte tutoriale, înțelegeți ce fac configurile din acest fișier, totuși voi explica pe scurt pentru ce sunt câteva lucruri din acest fișier

  • Aliasuri / furnizori
    Aici includeți toate bibliotecile / modulele de nod / alți furnizori și le mapați pe fiecare dintre aliasuri. Apoi, dacă utilizați un modul în orice parte a logicii aplicației dvs., puteți scrie acest lucru (în app-main.js sau orice alt fișier JS):
var React = require(‘react’);
var ReactDom = require('reactDom');
var $ = require('jquery');

//Your application logic

Sau dacă preferați AMD în locul CommonJS:

define(
    [
        ‘react’,
        ’reactDom’,
        ’jquery’
    ],
    function(React, ReactDom, $) {
        //Your application logic
    }
);

Sau și în ES6:

import React from 'react';
import ReactDom from 'reactDom';
import $ from 'jquery';
  • Definirea punctelor de intrare
entry: {

}

Acest bloc din configurația dvs. permite Webpack să stabilească unde începe executarea aplicației dvs. și creează bucăți din ea. A avea mai multe puncte de intrare în aplicație este întotdeauna avantajos. În special, puteți adăuga toate fișierele dvs. de furnizor – cum ar fi jQuery și ReactJS – într-o singură bucată. În acest fel, fișierele furnizorului dvs. vor rămâne aceleași, chiar și atunci când modificați fișierele sursă.

Deci, în configurația de mai sus, există două puncte de intrare. Unul pentru intrarea aplicației dvs. de unde începe JS și unul pentru furnizorii dvs. – fiecare dintre aceștia este mapat la un nume variabil.

  • Directorul de ieșire și numele fișierelor de pachet
output: {
     path: path.join(__dirname, “public”),
     filename: “dist/js/[name].bundle.js”
 },

Acest bloc îi spune lui Webpack ce să numească fișierele după procesul de compilare și unde să le plaseze. În exemplul nostru avem două intrări denumite aplicație și vânzători, deci după procesul de compilare veți avea două fișiere numite app.bundle.js și vendors.bundle.js interior / public / dist / js director.

  • Pluginuri

Webpack vine cu un ecosistem bogat de plugin-uri pentru a ajuta la satisfacerea nevoilor specifice. Voi explica pe scurt câteva dintre cele mai frecvent utilizate:

  • Folosește CommonsChunkPlugin pentru ca Webpack să determine ce cod / module utilizați cel mai mult și să îl puneți într-un pachet separat pentru a fi utilizat oriunde în aplicația dvs.
  • Puteți utiliza opțional FurnizațiPlugin a injecta globali. Există multe pluginuri jQuery care se bazează pe o variabilă globală jQuery, cum ar fi $, deci, folosind acest plugin, Webpack se poate prepanda var $ = require („jquery”) de fiecare dată când întâlnește globalul $ identificator. La fel pentru orice alt plugin, cum ar fi Bootstrap.

Prin includerea nuParse, îi puteți spune lui Webpack să nu analizeze anumite module. Acest lucru este util atunci când aveți doar versiunea dist a acestor module / biblioteci. Îmbunătățește timpul de construcție.

1612046287 111 Webpack pentru Fast and Furious
  • Încărcătoare

Acum, dacă scrieți JSX în codul dvs. React, puteți folosi fișierul jsx-loader sau babel-loader pentru a pre-compila JSX în JavaScript. Deci poți fugi npm instalați jsx-loader și includeți acest lucru în configurația dvs.:

loaders: [
    {                 
        test: /.js$/,                 
        loader: 'jsx-loader'             
    },
]

Cu toate acestea, dacă scrieți codul în JSX și ES6, atunci va trebui să utilizați încărcător babel, împreună cu pluginul babel pentru React. Așa că fugiți npm instala babel-core babel-loader babel-preset-es2015 babel-preset-react și apoi adăugați acest lucru la config în locul celor de mai sus.

loaders: [
    { 
         test: /.js$/, 
         loader: ‘babel’,
         query: {
             presets: [‘react’, ‘es2015’]
         },
         include: path.join(__dirname, ‘public’)
    }
]

La fel, aveți încărcătoare pentru a compila TypeScript, CoffeeScript etc.

Exemplu

  • Fișierul dvs. web-server:
var http = require("http");
var express = require("express");
var consolidate = require('consolidate');
var handlebars = require('handlebars');
var bodyParser = require('body-parser');

var routes = require('./routes');

var app = express();

//Set the folder-name from where you serve the html page.
app.set('views', 'views'); 

//For using handlebars as the template engine.
app.set('view engine', 'html');
app.engine('html', consolidate.handlebars);

//Set the folder from where you serve all static files like images, css, javascripts, libraries etc
app.use(express.static('./public')); 

app.use(bodyParser.urlencoded({ extended: true }));
var portNumber = 8000;

http.createServer(app).listen(portNumber, function(){
    console.log('Server listening at port '+ portNumber);
  	app.get('/', function(req, res){ 
  	    console.log('request to / received');
  		res.render('index.html');		
  	});
});
  • app-main.js de unde începe logica noastră front-end:
define(
    [
        ‘react’,
        ’reactDom’,
        ’./components/home-page’
    ],
    function(React, ReactDom, HomePage){ 
        console.log(‘Loaded the Home Page’);
        ReactDom.render(<HomePage />, document.getElementById(‘componentContainer’));
    }
);
  • home-page.js este componenta noastră părintește React care ar putea conține așa ceva:
define(['react', 'jquery', 'magnificPopup'], function(React, $) {
    var HomePage = React.createClass({
        getInitialState: function() {
            return {
                userName: 'ashwin'
            }
        },
        componentDidMount: function() {
            $('.test-popup-link').magnificPopup({
                type: 'image'
                // other options
            });
        },
    	render: function() {
    	    return (
      	    	<div id="homePage">
      	    	    {this.state.userName}
      	    	    <a className="test-popup-link" href="https://www.freecodecamp.org/news/webpack-for-the-fast-and-the-furious-bf8d3746adbd/path-to-image.jpg">Open popup</a>
       	    	</div>
    	    );
    	}
    });

    return HomePage;
});

Deschiderea terminalului, accesarea folderului rădăcină al proiectului și rularea webpack va crea două fișiere: vendors.bundle.js și app.bundle.js. Includeți aceste două fișiere în index.html și a lovit http: // localhost: 8000 în browserul dvs. Aceasta va reda o componentă cu numele dvs. de utilizator afișat pe pagina web.

Acum, pe măsură ce lucrați mai mult pe Webpack, veți fi frustrat de nevoia constantă de a vă construi manual fișierele pentru a vedea modificările reflectate în browser. Nu ar fi minunat dacă ar exista o modalitate de a automatiza procesul de compilare de fiecare dată când modificați un fișier? Deci, dacă v-ați săturat să tastați comanda webpack și apăsând butonul de reîmprospătare de pe browserul dvs. de fiecare dată când schimbați un nume de curs, citiți mai departe …

Automatizarea versiunilor cu Webpack Dev Server și React Hot Loader

Webpack pentru Fast and Furious

Vom folosi acest modul minunat numit Webpack Dev Server. Este un server expres care rulează pe portul 8080 și emite informații despre starea de compilare către client printr-o conexiune socket. Vom folosi, de asemenea Reactează încărcătorul fierbinte care este un plugin pentru Webpack care permite reîmprospătarea instantanee live fără a pierde starea în timp ce editați componentele React.

  • Pasul 1: Deci, fugi npm instalați webpack-dev-server – save-dev și apoi npm instala react-hot-loader – save-dev

Apoi, trebuie să modificați puțin configurația Webpack pentru a utiliza acest plugin. În încărcătoarele dvs., adăugați acest lucru înainte de orice alt încărcător:

{ 
    test: /.jsx?$/, 
    loaders: [‘react-hot’],
    include: path.join(__dirname, ‘public’)
}

Aceasta îi spune lui Webpack să utilizeze React Hot Loader pentru componentele dvs. Asigurați-vă că React Hot Loader vine înainte de Babel în matricea de încărcătoare. De asemenea, asigurați-vă că aveți include: path.join (__ dirname, ‘public’) pentru a evita procesarea node_modules sau s-ar putea să apară o astfel de eroare:

Uncaught TypeError: Nu se poate citi proprietatea „NODE_ENV” din nedefinit

  • Pasul 2: Modificări la index.html

Dacă ale tale index.html are așa ceva:

<script src="https://www.freecodecamp.org/dist/js/vendors.js"></script>
<script src="/dist/js/app.bundle.js"></script>

Schimbați acest lucru pentru a indica proxy-ul webpack-dev-server:

<script src="https://localhost:8080/dist/js/vendors.js"></script>
<script src="https://localhost:8080/dist/js/app.bundle.js"></script>
  • Pasul 3: Alerga webpack-dev-server –hot –inline,

așteptați finalizarea pachetului, apoi apăsați http: // localhost: 8000 (portul dvs. de server expres) din browser.

Dacă întâmpinați erori în timp ce configurați React Hot Loader, veți găsi acest lucru ghid de depanare și acest răspuns minunat pe Stack Overflow activat Gestionarea dependenței pluginului jQuery cu Webpack foarte folositor. În plus, puteți arunca o privire asupra configurării Webpack pentru proiectele mele Aici și Aici.

Acest lucru este destinat doar dezvoltării. În timp ce sunteți în producție, trebuie să reduceți toate fișierele. Doar alergând webpack -p va micșora / uglifica / concatenează toate fișierele.

Nu ar fi minunat dacă ar exista o modalitate de a vizualiza toate dependențele de fișiere într-o frumoasă vizualizare în formă de copac? Există o aplicație web care face asta.

În terminalul dvs., rulați webpack – profil – json> stats.jfiule. Aceasta va genera un fișier JSON numit stats.json. Merge la http://webpack.github.io/analyse / și încărcați fișierul și veți vedea toate dependențele într-o structură de tip copac.

1612046288 540 Webpack pentru Fast and Furious

Ți-a plăcut ce ai citit? Ar trebui Abonati-va. Nu-ți voi pierde timpul.