Kuidas Webpacki probleemi lahendasin ja silusin läbi prooviversioonide, vigade ja väikese välise abi.

Vaata originaali aadressil: https://www.instagram.com/p/BdCxrMcn-k5/?taken-by=riittagirl

Ma ütleksin, et see oli üsna teekond. Ma teadsin, et Webpacki ei ole lihtne seadistada: palju osi on palju, palju on npm ja need muutuvad uute väljaannetega. Pole ime, et silumine võib probleemideta probleemiks muutuda, kui midagi ei lähe nii, nagu lootsite (st mitte nii, nagu see on dokumentides).

Proovin siluda

Minu silumisreis algas järgmise seadistusega:

webpack.config.js

// veebipakk v4.6.0
const path = nõuda ('tee');
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
const WebpackMd5Hash = nõuda ('webpack-md5-hash');
const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
const webpack = vaja ('webpack');
moodul.exports = {
  sisestus: {main: './src/index.js'},
  väljund: {
    tee: path.resolve (__ dirname, 'dist'),
    failinimi: '[nimi]. [chunkhash] .js'
  },
  devServer: {
    contentBase: './dist',
    kuum: tõsi,
    avatud: tõsi
  },
  moodul: {
    reeglid: [
      {
        test: /\.js$/,
        välista: / node_modules /,
        kasuta: [
          {laadur: 'babel-loader'},
          {
            laadur: 'eslint-loader',
            valikud: {
              vormindaja: nõuda ('eslint / lib / vormindajad / stiilne')
            }
           }
         ]
       }
     ]
  },
  pistikprogrammid: [
    uus CleanWebpackPlugin ('dist', {}),
    uus HtmlWebpackPlugin ({
      süsti: vale,
      räsi: tõsi,
      mall: './src/index.html',
      failinimi: 'index.html'
    }),
    uus WebpackMd5Hash ()
  ]
};

pakett.json

{
  "nimi": "postitus",
  "versioon": "1.0.0",
  "kirjeldus": "",
  "main": "index.js",
  "skriptid": {
    "build": "webpack - mode mode",
    "dev": "webpack-dev-server"
   },
  "autor": "",
  "litsents": "ISC",
  "devDependencies": {
    "babel-cli": "^ 6.26.0",
    "babel-core": "^ 6.26.0",
    "babel-loader": "^ 7.1.4",
    "babel-preset-env": "^ 1.6.1",
    "babel-preset-react": "^ 6.24.1",
    "babel-runtime": "^ 6.26.0",
    "clean-webpack-plugin": "^ 0.1.19",
    "eslint": "^ 4.19.1",
    "eslint-config-prettier": "^ 2.9.0",
    "eslint-loader": "^ 2.0.0",
    "eslint-plugin-prettier": "^ 2.6.0",
    "eslint-plugin-react": "^ 7.7.0",
    "html-webpack-plugin": "^ 3.2.0",
    "uhkem": "^ 1.12.1",
    "reageerima": "^ 16.3.2",
    "reageeri-dom": "^ 16.3.2",
    "veebipakk": "^ 4.6.0",
    "webpack-cli": "^ 2.0.13",
    "webpack-dev-server": "^ 3.1.3",
    "webpack-md5-hash": "0.0.6"
  }
}

.babelrc

{
  "eelseaded": ["env", "reageeri"]
}

.eslintrc.js

moodul.exports = {
  env: {
    brauser: tõsi,
    commonjs: tõsi,
    es6: tõsi
  },
  laieneb: [
    'eslint: soovitatav',
    'plugin: reageeri / soovitatakse',
    'uhkem',
    'plugin: ilusam / soovitatav'
  ],
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: tõsi,
      jsx: tõsi
    },
    sourceType: 'moodul'
  },
  pistikprogrammid: ['reageerima', 'uhkem'],
  reeglid: {
    taane: ['viga', 2],
    'linebreak-style': ['viga', 'unix'],
    tsitaadid: ['hoiata', 'üksik'],
    pool: ['viga', 'alati'],
    'no-unused-vars': [
      'hoiata',
      {vars: 'kõik', args: 'puudub', ignoreRestSiblings: false}
    ],
    'uhkem / uhkem': 'viga'
   }
};

prettier.config.js

// .prettierrc.js
moodul.exports = {
  prindilaius: 80,
  sakkLaius: 2,
  pool: tõsi,
  singleQuote: tõsi,
  bracketSpacing: tõsi
};

Ja kaustas src /

index.html


  
 
    
      

index.js

importida reageerida 'reageerima';
import {render} saidist 'react-dom';
import Tere '' //Hello '';
klassi rakendus laiendab rakendust React.Component {
  renderdama () {
    tagasi (
      
              
    );   } } renderdama (, document.getElementById ('app'));

Tere.js

importida reageerida 'reageerima';
impordi PropTypes 'prop-tüüpi';
klass Tere laiendab React.Component {
  renderdama () {
    tagasta 
{this.props.hello}
;   } }
Hello.propTypes = {
  tere: PropTypes.string
};
eksport vaikimisi Tere;

See oli projekti üldine struktuur:

Mis siis probleem oli?

Nagu näete, seadistasin keskkonna, ESLintingi ja nii edasi. Lõin kõik, et saaksin hakata kodeerima ja oma uusi komponente oma läikivasse uude komponentide teeki lisama.

Aga mis siis, kui saan vea? Läheme kruvima midagi.

Kui proovime tõrke päritolu meie Google Chrome'i brauseri konsoolilt tagasi leida, on see meile väga keeruline. Komistaksime midagi sellist:

Allikakaardid pole konfigureeritud!

Ma tahan, et see osutaks failile Hello.js ja mitte komplekteeritud failile, selline nagu see tüüp siin tegi.

See on ilmselt väike asi

Või nii ma arvasin. Proovisin siis püstitada lähtekaarte, nagu on kirjeldatud dokumentides, lisades devtooli.

Kui veebipakett komplekteerib teie lähtekoodi, võib vigade ja hoiatuste leidmine nende algsesse asukohta olla keeruline. Näiteks kui ühendate kolm lähtefaili (a.js, b.js ja c.js) ühte kimbu (bundle.js) ja üks lähtefailidest sisaldab viga, osutab virna jälg lihtsalt kimbule. js. See pole alati abiks, kuna tõenäoliselt soovite täpselt teada, millises lähtefailis tõrge tekkis.
Vigade ja hoiatuste leidmise hõlbustamiseks pakub JavaScript allikakaarte, mis kaardistavad teie kompileeritud koodi tagasi algse lähtekoodiga. Kui tõrge pärineb b.js-st, ütleb allikakaart teile selle täpselt. (Allikas)

Nii et ma naiivselt eeldasin, et see töötab minu veebipack.config.js:

...
moodul.exports = {
  sisestus: {main: './src/index.js'},
  väljund: {
    tee: path.resolve (__ dirname, 'dist'),
    failinimi: '[nimi]. [chunkhash] .js'
  },
  devtool: 'in-source-map',
  devServer: {
    contentBase: './dist',
    kuum: tõsi,
    avatud: tõsi
  },
  ...

ja package.json

...
"skriptid": {
  "build": "webpack - mode mode",
  "dev": "webpack-dev-server - mode arendamine"
}
...

Selle tegemisel peate lisama arenduslipu, vastasel juhul ei tööta see nii, nagu dokumendid ütlevad. Kuid isegi soovitatud väärtuse korral ei käitunud allikaart nii, nagu ma tahtsin.

Kui loete seda juhendit SurviveJS, mida peaksite, siis näete.

Pärast seda, kui ma iga selle variandi ära katsetasin, otsustasin GitHubi jahi teemaga.

GitHub annab välja jahi

Kõigi GitHubi väljaannetes esitatud soovituste proovimine ei aidanud mind.

Mingil hetkel arvasin, et webpack-dev-serveris on midagi valesti. Ja selgus, et webpack-dev-server on juba mõni kuu olnud hooldusrežiimis.

Avastasin, et pärast seda, kui olen selle teema otsa komistanud, soovitavad nad kasutada webpack-dev-serveri asemel webpack-serve.

Ausalt, see oli esimene kord, kui ma kuulsin alternatiivist nimega webpack-serve. Ka dokumendid ei tundunud paljulubavad. Kuid otsustasin selle siiski teha.

npm install webpack-serve --save-dev

Lõin teenuse serve.config.js

const serve = nõua ('webpack-serve');
const config = nõuda ('./ webpack.config.js');
teenima ({config});

Asendasin webpack-dev-serveri minu paketis.json oleva veebipaketi teenusega.

Kuid ka webpack-serveerimise proovimine ei lahendanud seda.

Nii et sel hetkel oli mul tunne, nagu oleksin kasutanud kõiki soovitusi, mida GitHubist leida võisin:

  • Veebipakett 4 - lähtekaardid: see probleem soovitab, et devtool: 'source-map' peaks välja töötama, kuid minu puhul ei olnud see nii
  • kuidas teha veebipaketi lähtekaarti originaalfailidele: devtoolModuleFilenameTemplate lisamine: info => 'fail: //' + tee.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/') minu väljundkonfiguratsioonile ei aidanud palju. Kuid kliendi.js asemel näitas see mulle indeksi.js.
  • https://github.com/webpack/webpack/issues/6400: see ei ole minu probleemi täpne kirjeldus, seega ei tundunud siinsete meetodite proovimine mulle aitavat
  • Proovisin kasutada veebipaketti.SourceMapDevToolPlugin, kuid see ei töötanud minu seadistusega isegi siis, kui kustutasin devtoolsid või seadsin need valeks
  • Ma ei kasutanud siin UglifyJS-i pistikprogrammi, nii et selle jaoks suvandite seadistamine polnud lahendus
  • Ma tean, et webpack-dev-server on praegu hoolduses, nii et proovisin webpack-serve, kuid tundus, et ka lähtekaardid ei tööta sellega
  • Proovisin ka allika-kaardi-tugiteenuste paketti, kuid seal pole õnne. Mul on siin sarnane olukord.

Püha virna ülevool

Allikakaartide konfigureerimine võttis mul igaveseks, nii et lõin probleemi StackOverflow'is.

Veebipaketi konfiguratsiooni silumine on tavaliselt tülikas ülesanne: parim viis selle saavutamiseks on luua nullist konfiguratsioon. Kui miski dokumentidest ei tööta ootuspäraselt, võib olla hea mõte proovida leida sarnane väljaanne harust või luua oma väljaanne. Ma arvasin niikuinii.

Esimene tüüp, kes mu küsimusele vastas, üritas tõesti aidata. Ta jagas oma töö konfiguratsiooni. Isegi aitas mind, luues tõmbetaotluse.

Ainus probleem siin: miks tema häälestus töötab? Ma mõtlen, et see pole ilmselt maagia ja seal on mingi mooduli ühildumatus. Kahjuks ei saanud ma aru, miks minu seadistus ei töötanud:

Asi on selles, et ta tegi seda parimate kavatsustega, korraldades projekti ümber oma viisil.

See tähendas, et mul oleks projektis veel natuke seadistusi ja ma peaksin päris palju asju muutma. See oleks võinud testi seadistamise ajal olla ok, kuid otsustasin failid järk-järgult muuta, et näha, kus see puruneb.

Teema lahkamine

Vaatame siis erinevusi tema Webpacki ja paketi.jsoni ning minu vahel. Just plaadi jaoks kasutasin küsimuses teistsugust repo, seega on siin minu link repole ja minu häälestamine.

// veebipakk v4.6.0
const path = nõuda ('tee');
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
const WebpackMd5Hash = nõuda ('webpack-md5-hash');
const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
const stiilne = vaja ('eslint / lib / vormindajad / stiilne');
const webpack = vaja ('webpack');
moodul.exports = {
  sisestus: {main: './src/index.js'},
  väljund: {
   devtoolModuleFilenameTemplate: info => 'file: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/'),
   tee: path.resolve (__ dirname, 'dist'),
   failinimi: '[nimi]. [räsi] .js'
  },
  režiim: 'areng',
  devtool: 'eval-odav-moodul-lähtekood-kaart',
  devServer: {
    contentBase: './dist',
    kuum: tõsi
  },
  moodul: {
    reeglid: [
      {
        test: /\.js$/,
        välista: / node_modules /,
        laadur: 'babel-loader'
      },
      {
        test: /\.js$/,
        välista: / node_modules /,
        laadur: 'eslint-loader',
        valikud: {
          vormindaja: stiilne
         }
       }
     ]
   },
   pistikprogrammid: [
    // uus veebipakett.SourceMapDevToolPlugin ({
    // failinimi: '[fail] .map',
    // moduleFilenameTemplate: määratlemata,
    // fallbackModuleFilenameTemplate: määratlemata,
    // lisa: null,
    // moodul: tõene,
    // veerud: tõene,
    // lineToLine: vale,
    // noSources: vale,
    // nimeruum: ''
    //}),
    uus CleanWebpackPlugin ('dist', {}),
    uus HtmlWebpackPlugin ({
      süsti: vale,
      räsi: tõsi,
      mall: './src/index.html',
      failinimi: 'index.html'
    }),
    uus WebpackMd5Hash (),
    // uus veebipakett.NamedModulesPlugin (),
    uus veebipakett.HotModuleReplacementPlugin ()
  ]
};

pakett.json

{
"nimi": "postitus",
"versioon": "1.0.0",
"kirjeldus": "",
"main": "index.js",
"skriptid": {
  "juturaamat": "käivitusjuturaamat -p 9001 -c .ajakirjaraamat",
  "dev": "webpack-dev-server --režiimi arendamine --open",
  "build": "webpack - mode mode"
},
"autor": "",
"litsents": "ISC",
"devDependencies": {
  "@ juturaamat / lisa-toimingud": "^ 3.4.3",
  "@ juturaamat / reageeri": "v4.0.0-alpha.4",
  "babel-cli": "^ 6.26.0",
  "babel-core": "^ 6.26.0",
  "babel-loader": "^ 7.1.4",
  "babel-preset-env": "^ 1.6.1",
  "babel-preset-react": "^ 6.24.1",
  "babel-runtime": "^ 6.26.0",
  "clean-webpack-plugin": "^ 0.1.19",
  "eslint": "^ 4.19.1",
  "eslint-config-prettier": "^ 2.9.0",
  "eslint-loader": "^ 2.0.0",
  "eslint-plugin-prettier": "^ 2.6.0",
  "eslint-plugin-react": "^ 7.7.0",
  "html-webpack-plugin": "^ 3.2.0",
  "uhkem": "^ 1.12.1",
  "reageerima": "^ 16.3.2",
  "reageeri-dom": "^ 16.3.2",
  "webpack": "v4.6.0",
  "webpack-cli": "^ 2.0.13",
  "webpack-dev-server": "v3.1.3",
  "webpack-md5-hash": "0.0.6",
  "webpack-serve": "^ 0.3.1"
},
"sõltuvused": {
  "source-map-support": "^ 0.5.5"
}
}

Jätsin nad tahtmatult puutumata, et näeksite minu silumiskatseid. Kõik töötas, välja arvatud lähtekaardid. Allpool jagan ma seda, mida ta minu konfiguratsioonis muutis - kuid muidugi on parem vaadata täielikku tõmmistaotlust siit.

 // veebipakk v4.6.0
 const path = nõuda ('tee');
 const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
 // selle mooduli kustutamine konfiguratsioonist
-const WebpackMd5Hash = nõuda ('webpack-md5-hash');
 const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
 const stiilne = vaja ('eslint / lib / vormindajad / stiilne');
 const webpack = vaja ('webpack');
 
 moodul.exports = {
  // režiimi sätete lisamine siin lipu asemel
+ režiim: 'areng',
   sisestus: {main: './src/index.js'},
   väljund: {
  // tee ja malli kustutamine väljundist
- devtoolModuleFilenameTemplate: info =>
- 'fail: //' + tee.lahendamine (info.absoluteResourcePath) .replace (/ \\ / g, '/'),
- tee: path.resolve (__ dirname, 'dist'),
     failinimi: '[nimi]. [räsi] .js'
   },
  // lahendamise valiku lisamine siia
+ lahenda: {
+ laiendid: ['.js', '.jsx']
+},
   // devtooli valiku muutmine
   devtool: 'eval-odav-moodul-lähtekood-kaart',
  // devServeri sätete muutmine
   devServer: {
- contentBase: './dist',
- kuum: tõsi
+ kuum: tõsi,
+ avatud: tõsi
   },
   moodul: {
     reeglid: [
    // mu kahe tšeki koondamine ühte (hiljem palus ta mul vestluses, et ma kustutaksin eslinti võimaluse täielikult)
       {
- test: /\.js$/,
- välista: / node_modules /,
- laadur: 'babel-loader'
-},
- {
- test: /\.js$/,
+ test: /\.jsx?$/,
         välista: / node_modules /,
- laadur: „eslint-loader”,
- valikud: {
- vormindaja: stiilne
-}
+ kasutamine: [
+ {laadur: 'babel-loader'},
+ {laadur: 'eslint-loader', valikud: {vormindaja: stiilne}}
+]
       }
     ]
   },
   pistikprogrammid: [
    // puhastas mõned võimalused
- uus CleanWebpackPlugin ('dist', {}),
+ uus CleanWebpackPlugin ('dist'),
    // kustutas HTMLWebpackPluginist mõned seaded
     uus HtmlWebpackPlugin ({
- süsti: vale,
- räsi: tõsi,
- mall: './src/index.html',
- failinimi: 'index.html'
+ mall: './src/index.html'
     }),
  // eemaldas räsimise pistikprogrammi täielikult ja lisas kuuma mooduli asendaja
- uus WebpackMd5Hash (),
- uus veebipakett.NamedModulesPlugin (),
+ uus veebipakk.HotModuleReplacementPlugin ()
   ]
 };

pakett.json

"main": "index.js",
   "skriptid": {
     "juturaamat": "käivitusjuturaamat -p 9001 -c .ajakirjaraamat",
  // lisas erinevad lipud veebipack-dev-serverile
- "dev": "webpack-dev-server --režiimi arendamine - avada",
+ "dev": "webpack-dev-server --config ./webpack.config.js",
     "build": "webpack - mode mode"
   },
   "autor": "",
@@ -31,11 +31,6 @@
     "reageeri-dom": "^ 16.3.2",
     "webpack": "v4.6.0",
     "webpack-cli": "^ 2.0.13",
- "webpack-dev-server": "v3.1.3",
- "webpack-md5-hash": "0.0.6",
- "webpack-serve": "^ 0.3.1"
-},
- "sõltuvused": {
// teisaldatud dev-server sõltuvustesse
- "source-map-support": "^ 0.5.5"
+ "webpack-dev-server": "v3.1.3"
   }
 }

Nagu näete, kustutas ta hunniku mooduleid ja lisas konfiguratsiooni režiimi. Ja kui tõmmata taotlust, näete, et ta lisas ka mõne konkreetse reageerimisele suunatud HMR-i.

See aitas allikakaartidel töötada, ohverdades palju pistikprogramme, kuid polnud konkreetset selgitust, miks ta tegi seda, mida ta tegi. Dokumente lugeva inimesena ei olnud see minu jaoks eriti rahul.

Hiljem võtsin oma esialgse veebipaketi.connfig.js ja asusin muudatusi järk-järgult lisama, et näha, millal allikakaardid lõpuks tööle hakkasid.

1. muudatus:

- uus CleanWebpackPlugin ('dist', {}),
+ uus CleanWebpackPlugin ('dist'),

2. muudatus:

Lisasin webpack-dev-server sõltuvustesse, mitte devDependencies'idesse:

...
},
"sõltuvused": {
  "webpack-dev-server": "^ 3.1.3"
}
}
...

3. muudatus:

Järgmisena eemaldasin mõned devServeri seaded:

devServer: {
- contentBase: './dist',
+ kuum: tõsi,
+ avatud: tõsi
   },

4. muudatus:

Eemaldame stiilse:

...
},
devtool: 'in-source-map',
  devServer: {
    kuum: tõsi,
    avatud: tõsi
  },
...
kasuta: [
  {laadur: 'babel-loader'},
  {
    laadur: 'eslint-loader'
  }
]
....

5. muudatus:

Proovime nüüd eemaldada WebpackMd5Hash räsimise pistikprogrammi:

...
moodul.exports = {
režiim: 'areng',
sisestus: {main: './src/index.js'},
väljund: {
  tee: path.resolve (__ dirname, 'dist'),
  failinimi: '[nimi] .js'
  },
devtool: 'in-source-map',
...
pistikprogrammid: [
  uus CleanWebpackPlugin ('dist'),
  uus HtmlWebpackPlugin ({
    süsti: vale,
    räsi: tõsi,
    mall: './src/index.html',
    failinimi: 'index.html'
  })
- uus WebpackMd5Hash (),
 ]
};

6. muudatus:

Proovime nüüd eemaldada mõned seaded saidilt HtmlWebpackPlugin:

...
pistikprogrammid: [
  uus CleanWebpackPlugin ('dist'),
  uus HtmlWebpackPlugin ({
    mall: './src/index.html'
  })
]};
...

7. muudatus:

Nagu näeme tema koodist, lisas ta siia mõned lahendamisvõimalused. Ma isiklikult ei saa aru, miks meil neid siin vaja on. Ja ma ei leidnud teavet ka dokumentidest.

...
lahenda: {
  laiendid: ['.js', '.jsx']
},
moodul: {
...

8. muudatus:

Väljundtee kustutamine:

...
sisestus: {main: './src/index.js'},
väljund: {
  failinimi: '[nimi] .js'
},
devtool: 'in-source-map',
...

9. muudatus:

Kuuma mooduli asendamise pistikprogrammi lisamine:

...
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
const webpack = vaja ('webpack');
...
pistikprogrammid: [
  uus CleanWebpackPlugin ('dist'),
  uus HtmlWebpackPlugin ({
    mall: './src/index.html'
  }),
  uus veebipakett.HotModuleReplacementPlugin ()
]
};
...

Muuda 10:

Lisamine - config to package.json:

- "dev": "webpack-dev-server --režiimi arendamine - avada",
+ "dev": "webpack-dev-server --config ./webpack.config.js",

Teeme midagi selgeks: sel hetkel olin konfiguratsiooni peaaegu ümber kirjutanud.

See on tohutu küsimus, kuna me ei saa seda lihtsalt ümber kirjutada iga kord, kui midagi ei tööta!

Veebipaketi tundmaõppimiseks looge parimast allikast rakendus Loo-reageeri

Viimase abinõuna käisin kontrollimas, kuidas loo-reageeri-rakendus rakendab allika kaardistamist. See oli ju õige otsus. See on webpack dev versiooni konfiguratsioon.

Kui kontrollime, kuidas devtooli seal rakendatakse, näeme järgmist:

// Selle asemel, et näha kompileeritud väljundit DevToolsis, võiksite kasutada väärtust „eval”.
// Vaata arutelu aadressil https://github.com/facebook/create-react-app/issues/343.
devtool: 'odav-moodul-allika-kaart'

Nii et see teema juhtis mind ühe teise siin leiduva teema juurde.

// veebipakk v4
const path = nõuda ('tee');
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
const WebpackMd5Hash = nõuda ('webpack-md5-hash');
const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
moodul.exports = {
režiim: "areng",
sisestus: {main: './src/index.js'},
väljund: {
  tee: path.resolve (__ dirname, 'dist'),
  failinimi: '[nimi]. [räsi] .js'
},
devtool: 'odav-moodul-allika-kaart',
devServer: {
  contentBase: './dist',
  kuum: tõsi,
  avatud: tõsi
},
moodul: {

Liinide muutmine ikka ei õnnestunud - veel! Ma sain teada, et allikakaart on juba pikka aega rippuv teema.

Küsige õigetelt inimestelt

Igas avatud lähtekoodiga projektis on hooldajad. Niisiis, antud juhul oli see kindlasti õige samm, et seda kohe kuttidelt küsida.

Ehkki Danieli katse- ja eksitusmeetod minu jaoks tegelikult ei töötanud, olin meeldivalt üllatunud, kui hooldajate meeskond oli liikuv.

Nii et lõin repo seadistusega, mida näete siin. Vaadake seal teist kohustust.

Teie jaoks lihtsamaks muutmiseks on siin minu projekt webpack.js, kuhu pöördusin tagasi oma esialgse puhtama seadistuse juurde:

// veebipakk v4
const path = nõuda ('tee');
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
const WebpackMd5Hash = nõuda ('webpack-md5-hash');
const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
moodul.exports = {
  režiim: 'areng',
  sisestus: {main: './src/index.js'},
  väljund: {
    tee: path.resolve (__ dirname, 'dist'),
    failinimi: '[nimi]. [räsi] .js'
  },
  devtool: 'in-source-map',
  devServer: {
    contentBase: './dist',
    kuum: tõsi,
    avatud: tõsi
  },
  moodul: {
    reeglid: [
      {
        test: /\.js$/,
        välista: / node_modules /,
        kasuta: [
          {laadur: 'babel-loader'},
          {
            laadur: 'eslint-loader',
            valikud: {
              vormindaja: nõuda ('eslint / lib / vormindajad / stiilne')
            }
          }
         ]
        }
      ]
  },
  pistikprogrammid: [
    uus CleanWebpackPlugin ('dist'),
    uus HtmlWebpackPlugin ({
      süsti: vale,
      räsi: tõsi,
      mall: './src/index.html',
      failinimi: 'index.html'
    }),
    uus WebpackMd5Hash ()
  ]
};

Pärast minu koodi kontrollimist lõi hooldaja probleemi.

Vaatame uuesti, mida ta sinna lisas:

Režiimi valiku määramine
Esimene probleem, mille leidsin, on see, kuidas režiimi valik oli seatud. Npm skriptides oli režiim seatud:
webpack --režiimi tootmine
Õige viis oleks:
webpack - mode = tootmine
Npm skriptide lõplik olek näeb minu jaoks välja selline:
"skriptid": {
 "build": "webpack - mode = production",
 "start": "webpack-dev-server --mode = development --hot"
}
Muutsin alustamiseks ka dev-i, kuna see on standardsem ja seda oodatakse teistelt arendajatelt käsuna. Npm starti saate tegelikult teha ilma käsu ta
...
"skriptid": {
  "build": "webpack - mode mode",
  "dev": "webpack-dev-server --mode = development --hot"
},
...

Järgmisena soovitas ta järgmist:

devtool lähtekaartide jaoks
Soovitan alati sisemise allika-kaardi varianti, see on kõige sirgem ja see sisaldub paketis endas selle lõpus oleva kommentaarina.
moodul.exports = {
+ devtool: 'in-source-map',
 // ülejäänud teie konfiguratsioon
}
Samuti soovitan luua eraldi objekt ja asustada seda ainult arendamise eesmärgil:
käsk
webpack-dev-server - mode = arendus NODE_ENV = arendus
webpack.config.js
const webpackConfig = {}
if (protsess.env.NODE_ENV === 'arendus') {
 webpackConfig.devtool = 'inline-source-map'
}
Nii saate veenduda, et see ei mõjuta tootekomplekti.

Siis tegi ta ettepaneku eemaldada ESLint laaduritelt:

Linting ja arendaja kogemus
Ausalt, kustutaksin laadijana eslint, see on super rämps ja see segab arenguvoolu. Selle kontrollimiseks eelistan lisada eelkinnitusjuhendi.
See on ülilihtne, kui lisada järgmine skript:
"skriptid": {
+ "lint": "eslint ./src/**/*.js"
 "build": "webpack - mode = production",
 "start": "webpack-dev-server --mode = development --hot"
}
Ja siis ühendades selle huskyga.

ja selle lisamine skriptidesse:

...
"skriptid": {
"lint": "eslint ./src/**/*.js",
"build": "webpack - mode mode",
"dev": "webpack-dev-server --mode = development --hot"
},
...

Tegin sihtrühmas src / Hello.js vea, et näha, kuidas allikakaardid seekord toimisid.

importida reageerida 'reageerima';
impordi PropTypes 'prop-tüüpi';
klass Tere laiendab React.Component {
  console.log (tere.maailm);
  renderdama () {
    tagasta 
{this.props.hello}
;   } } Hello.propTypes = {   tere: PropTypes.string }; eksport vaikimisi Tere;

Kuidas ma probleemi lahendasin

Emissiooniks oli EsLint. Kuid pärast režiimide õiget määratlemist ja eslint-laaduri eemaldamist töötasid allikakaardid suurepäraselt!

Pärast ülalpidaja mulle antud näidet värskendasin oma veebipaketti järgmiselt:

// veebipakk v4
const path = nõuda ('tee');
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
const WebpackMd5Hash = nõuda ('webpack-md5-hash');
const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
moodul.exports = {
  sisestus: {main: './src/index.js'},
  väljund: {
    tee: path.resolve (__ dirname, 'dist'),
    failinimi: '[nimi]. [räsi] .js'
  },
  devtool: 'in-source-map',
  devServer: {
    contentBase: './dist',
    kuum: tõsi,
    avatud: tõsi
  },
  moodul: {
    reeglid: [
     {
      test: /\.js$/,
      välista: / node_modules /,
      kasutamine: [{laadur: 'babel-loader'}]
     }
    ]
  },
  pistikprogrammid: [
    uus CleanWebpackPlugin ('dist'),
    uus HtmlWebpackPlugin ({
      süsti: vale,
      räsi: tõsi,
      mall: './src/index.html',
      failinimi: 'index.html'
    }),
    uus WebpackMd5Hash ()
  ]
};

ja minu pakett JSON aadressile:

{
"nimi": "postitus",
"versioon": "1.0.0",
"kirjeldus": "",
"main": "index.js",
"skriptid": {
  "build": "webpack - mode = production",
  "start": "NODE_ENV = arendus webpack-dev-server - mode = arendus --hot"
},
"autor": "",
"litsents": "ISC",
"devDependencies": {
  "babel-cli": "^ 6.26.0",
  "babel-core": "^ 6.26.0",
  "babel-loader": "^ 7.1.4",
  "babel-preset-env": "^ 1.6.1",
  "babel-preset-react": "^ 6.24.1",
  "babel-runtime": "^ 6.26.0",
  "clean-webpack-plugin": "^ 0.1.19",
  "eslint": "^ 4.19.1",
  "eslint-config-prettier": "^ 2.9.0",
  "eslint-loader": "^ 2.0.0",
  "eslint-plugin-prettier": "^ 2.6.0",
  "eslint-plugin-react": "^ 7.7.0",
  "html-webpack-plugin": "^ 3.2.0",
  "uhkem": "^ 1.12.1",
  "reageerima": "^ 16.3.2",
  "reageeri-dom": "^ 16.3.2",
  "veebipakk": "^ 4.6.0",
  "webpack-cli": "^ 2.0.13",
  "webpack-md5-hash": "0.0.6"
},
"sõltuvused": {
  "webpack-dev-server": "^ 3.1.3"
}
}

Lõpuks toimisid allikakaardid!

Järeldused:

Allikakaarte on alates 2016. aastast korduvalt arutatud ja vead leidnud, nagu näete siin.

Webapack vajab auditeerimisel abi!

Pärast selle vea leidmist esitasin probleemi ESLinti laaduri paketti.

Allikakaartide kvaliteedi kontrollimisel saame seda tööriista kasutada.

Mida saate teha, kui teil on veebipaketi probleem?

Juhul, kui takerdute mõne Webpacki probleemiga, ärge paanitsege! Järgige neid samme:

  • Otsige GitHubist välja sarnased probleemid.
  • Proovige kontrollida katteplaate ja vaadata, kuidas seda funktsiooni seal rakendatakse, näiteks luua-reageerida-rakendus.
  • Esitage StackOverflow kohta küsimusi - ärge kartke! Veenduge, et teil oleks siiski olnud võimalusi oma probleemi iseseisvaks lahendamiseks.
  • Ärge kõhelge sellest piiksuma ja küsige otse hoolduse pakkujatelt.
  • Looge küsimusi, kui olete need leidnud. See aitab kaastöötajaid palju!

Selles artiklis esitasin teile oma konfiguratsioonifaili ja selle samm-sammult konfigureerimise protsessi.

Märkus: kuna paljud npm-i sõltuvused võivad selle lugemise ajaks muutuda, ei pruugi sama konfiguratsioon teie jaoks töötada! Palun teil jätta oma vead allolevatesse kommentaaridesse, et saaksin neid hiljem redigeerida.

Selle artikli jaoks palun tellige ja plaksutage! Aitäh!