Kuinka ratkaisin Webcack-ongelmani ja virheenkorjauksen kokeilun, virheen ja pienen ulkopuolisen avun avulla.

Katso alkuperäinen osoitteessa: https://www.instagram.com/p/BdCxrMcn-k5/?taken-by=riittagirl

Sanoisin, että tämä oli aika matka. Tiesin, että Webpackia ei ollut helppo määrittää: on monia osia, joissa on monia vaihtoehtoja, npm helvetti, ja ne muuttuvat uusien julkaisujen myötä. Ei ihme, että virheenkorjauksesta voi tulla helposti hankala tehtävä, kun jokin ei suju odotetusti (ts. Ei sellaisena kuin se on asiakirjoissa).

Yritetään debug

Virheenkorjauksen matkani alkoi seuraavalla asetuksella:

webpack.config.js

// verkkopakkaus v4.6.0
const polku = vaadi ('polku');
const HtmlWebpackPlugin = vaadi ('html-webpack-plugin');
const WebpackMd5Hash = vaadi ('webpack-md5-hash');
const CleanWebpackPlugin = vaadi ('clean-webpack-plugin');
const webpack = vaadi ('webpack');
module.exports = {
  merkintä: {main: './src/index.js'},
  lähtö: {
    polku: polku.resolve (__ dirname, 'dist'),
    tiedostonimi: '[nimi]. [chunkhash] .js "
  },
  devServer: {
    contentBase: './dist',
    kuuma: totta,
    avoin: totta
  },
  moduuli: {
    säännöt:
      {
        testi: /\.js$/,
        sulje pois: / node_modules /,
        käytä: [
          {loader: 'babel-loader'},
          {
            kuormain: 'eslint-loader',
            vaihtoehdot: {
              muotoilija: vaaditaan ('eslint / lib / muotoilijat / tyylikäs')
            }
           }
         ]
       }
     ]
  },
  plugins: [
    uusi CleanWebpackPlugin ('dist', {}),
    uusi HtmlWebpackPlugin ({
      pistä: väärä,
      hash: totta,
      malli: './src/index.html',
      tiedostonimi: 'index.html'
    }),
    uusi WebpackMd5Hash ()
  ]
};

package.json

{
  "nimi": "viesti",
  "versio": "1.0.0",
  "kuvaus": "",
  "main": "index.js",
  "skriptit": {
    "rakentaa": "webpack - tilatuotanto",
    "dev": "webpack-dev-server"
   },
  "kirjailija": "",
  "lisenssi": "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",
    "kauneampi": "^ 1.12.1",
    "reagoi": "^ 16.3.2",
    "react-dom": "^ 16.3.2",
    "verkkopakkaus": "^ 4.6.0",
    "webpack-cli": "^ 2.0.13",
    "webpack-dev-server": "^ 3.1.3",
    "webpack-md5-hash": "0.0.6"
  }
}

.babelrc

{
  "esiasetukset": ["env", "reagoida"]
}

.eslintrc.js

module.exports = {
  env: {
    selain: totta,
    commonjs: totta,
    es6: totta
  },
  ulottuu: [
    'Eslint: suositeltava',
    'Plugin: reagoida / suositeltava',
    'Kauniimpi',
    'Plugin: kauniimpi / suositeltava'
  ],
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: totta,
      jsx: totta
    },
    sourceType: 'moduuli'
  },
  plugins: ['reagoida', 'kauneampi'],
  säännöt: {
    luetelmakohta: ['virhe', 2],
    'linebreak-style': ['virhe', 'unix'],
    lainaukset: ['varoita', 'yksi'],
    puoliksi: ['virhe', 'aina'],
    'ei-käyttämättömiä varsia': [
      'varoittaa',
      {vars: 'all', args: 'none', ignoreRestSiblings: false}
    ],
    'kaunein / kauniimpi': 'virhe'
   }
};

prettier.config.js

// .prettierrc.js
module.exports = {
  tulostusleveys: 80,
  välilehtileveys: 2,
  puoliksi: totta,
  singleQuote: totta,
  bracketSpacing: totta
};

Ja src / kansio:

index.html


  
 
    
      

index.js

tuo reagoida 'reagoida';
tuo {render} maasta 'react-dom';
Tuo hei './Hellosta';
luokan sovellus laajentaa React.Component {
  tehdä () {
    palata (
      
                   );   } } renderöinti (, document.getElementById ('app'));

Hello.js

tuo reagoida 'reagoida';
tuoda PropTypes 'prop-tyypeistä';
luokka Hello laajentaa React.Component {
  tehdä () {
    palauta 
{this.props.hello}
;   } }
Hello.propTypes = {
  hei: PropTypes.string
};
vienti oletus Hei;

Tämä oli koko projektin rakenne:

Joten mikä oli ongelma?

Kuten näette, olen asettanut ympäristön, ESLintingin ja niin edelleen. Loin kaiken, jotta voin aloittaa koodauksen ja lisätä uusia komponenttejani kiiltävään uuteen komponenttikirjastoon.

Mutta entä jos saan virheen? Mennään ruuvaamaan jotain.

Jos yritämme jäljittää virheen alkuperä Google Chrome -selainkonsoliltamme, tämä on meille erittäin vaikeaa. Kompastuimme jotain tällaista:

Lähdekarttoja ei ole määritetty!

Haluan sen osoittavan tiedostoon Hello.js eikä niputettuun tiedostoon, kinda kuten tämä kaveri teki täällä.

Tämä on todennäköisesti pieni asia

Tai niin ajattelin. Joten yritin perustaa lähdekartat dokumentissa kuvatulla tavalla lisäämällä devtool.

Kun verkkopakkaus niputtaa lähdekoodisi, voi olla vaikeaa jäljittää virheitä ja varoituksia alkuperäiseen sijaintiinsa. Jos esimerkiksi niputat kolme lähdetiedostoa (a.js, b.js ja c.js) yhdeksi paketiksi (bundle.js) ja yksi lähdetiedoista sisältää virheen, pinon jäljitys osoittaa yksinkertaisesti kimppuun. js. Tästä ei ole aina hyötyä, koska haluat todennäköisesti tietää tarkalleen, mistä lähdetiedostosta virhe johtui.
Virheiden ja varoitusten jäljittämisen helpottamiseksi JavaScript tarjoaa lähdekartat, jotka kuvaavat käännetyn koodisi takaisin alkuperäiseen lähdekoodiin. Jos virhe johtuu b.js: stä, lähdekartta kertoo sinulle juuri sen. (Lähde)

Joten oletin naiivasti, että tämä toimisi webpack.config.js -sovelluksessa:

...
module.exports = {
  merkintä: {main: './src/index.js'},
  lähtö: {
    polku: polku.resolve (__ dirname, 'dist'),
    tiedostonimi: '[nimi]. [chunkhash] .js "
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    kuuma: totta,
    avoin: totta
  },
  ...

ja paketti.json

...
"skriptit": {
  "rakentaa": "webpack - tilatuotanto",
  "dev": "webpack-dev-server - mode kehitys"
}
...

Sinun on lisättävä kehityslippu, kun teet sitä, muuten se ei toimi kuten asiakirjat sanovat. Lähdekartta ei toiminut edes ehdotetulla arvolla, kuten halusin.

Jos luet tämän oppaan SurviveJS: ltä, jonka sinun pitäisi, näet.

Kun olen kokeillut kaikkia vaihtoehtoja siitä, turvauduin GitHub-kyselyyn metsästykseen.

GitHub julkaisee metsästystä

Kaikkien GitHub-aiheisiin liittyvien ehdotusten kokeilu ei auttanut minua.

Jossain vaiheessa ajattelin, että jotain oli vialla webpack-dev-serverissä. Ja kävi ilmi, että webpack-dev-server on ollut ylläpitotilassa jo muutama kuukausi.

Huomasin, että kompastuani tätä asiaa, jossa he suosittelevat webpack-palvelun käyttämistä webpack-dev-palvelimen sijaan.

Rehellisesti, se oli ensimmäinen kerta, kun olin kuullut vaihtoehdosta nimeltä webpack-serve. Dokumentit eivät myöskään näyttäneet lupaavilta. Mutta päätin silti laukaista.

npm asenna webpack-serve --save-dev

Loin palvelun.konfig.js

const palvella = vaadi ('webpack-palvel');
const config = vaadi ('./ webpack.config.js');
palvele ({config});

Korvasin webpack-dev-serverin web.pack-palvelimella paketti.json.

Mutta webpack-palvelun yrittäminen ei ratkaissut sitäkään.

Joten tässä vaiheessa tunsin olevani käyttänyt kaikkia ehdotuksia, jotka löysin GitHubista:

  • Verkkopaketti 4 - Lähdekartat: tämä kysymys viittaa siihen, että devtool: 'lähdekartta' pitäisi toimia laatikosta, mutta tämä ei ollut minun tapaukseni
  • Kuinka tehdä webpack-lähdekartta alkuperäisiin tiedostoihin: devtoolModuleFilenameTemplate: info => 'tiedosto: //' + polku.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/') tulostuskonfiguraatiooni ei auttanut paljon. Mutta client.js: n sijaan se näytti minulle index.js.
  • https://github.com/webpack/webpack/issues/6400: tämä ei ole tarkka kuvaus aiheistani, joten tässä esitettyjen menetelmien kokeilu ei tuntunut auttavan minua
  • Yritin käyttää webpack.SourceMapDevToolPlugin -sovellusta, mutta se ei toiminut asennukseni kanssa, vaikka poistin devtools-ohjelmat tai asetin ne vääriksi
  • En käyttänyt UglifyJS-laajennusta täällä, joten sen asetusten määrittäminen ei ollut ratkaisu
  • Tiedän, että webpack-dev-palvelin on nyt kunnossa, joten yritin webpack-palvella, mutta näytti siltä, ​​että lähdekartat eivät myöskään toimi sen kanssa
  • Kokeilin myös lähdekartta-tukipakettia, mutta ei onnea siellä. Minulla on samanlainen tilanne kuin täällä.

Pyhä StackOverflow

Lähdekarttojen määrittäminen kesti minua ikuisesti, joten loin ongelman StackOverflow-sovellukseen.

Webpack-asetusten virheenkorjaus on yleensä hankala tehtävä: paras tapa edetä on luoda konfiguraatio tyhjästä. Jos jokin dokumentaatiosta ei toimi odotetulla tavalla, voi olla hyvä idea yrittää löytää samanlainen ongelma sivukonttorista tai luoda oma numero. Ajattelin niin, joka tapauksessa.

Ensimmäinen kaveri, joka vastasi kysymykseeni, yritti todella auttaa. Hän jakoi oman työskentelykokoonpanon. Jopa auttoi minua luomalla vetämispyyntö.

Ainoa ongelma tässä: miksi hänen asennus toimii? Tarkoitan, että tämä ei todennäköisesti ole taikuutta, ja siinä on jonkin verran moduulien yhteensopimattomuutta. Valitettavasti en voinut ymmärtää miksi asennusohjelma ei toiminut:

Asia on, että hän teki sen parhaillaan tarkoituksillaan uudistamalla hanketta omalla tavallaan.

Tämä tarkoitti, että minulla olisi jonkin verran enemmän asennusta projektissa ja minun olisi muutettava melko monia asioita. Se saattoi olla kunnossa, jos tein testiasetuksia, mutta päätin tehdä tiedostoihin asteittain muutokset nähdäkseni, missä se rikkoi.

Aiheen leikkaaminen

Katsotaanpa eroja hänen Webpackin ja package.jsonin ja minun välilläni. Juuri levytykseksi käytin kysymyksessä erilaista repoa, joten tässä on linkki repoon ja asennukseni.

// verkkopakkaus v4.6.0
const polku = vaadi ('polku');
const HtmlWebpackPlugin = vaadi ('html-webpack-plugin');
const WebpackMd5Hash = vaadi ('webpack-md5-hash');
const CleanWebpackPlugin = vaadi ('clean-webpack-plugin');
const tyylikäs = vaadi ('eslint / lib / formatters / tyylikäs');
const webpack = vaadi ('webpack');
module.exports = {
  merkintä: {main: './src/index.js'},
  lähtö: {
   devtoolModuleFilenameTemplate: info => 'tiedosto: //' + polku.resolve (info.absoluteResourcePath) .korvaa (/ \\ / g, '/'),
   polku: polku.resolve (__ dirname, 'dist'),
   tiedostonimi: '[nimi]. [hash] .js "
  },
  tila: 'kehitys',
  devtool: 'eval-halpa-moduuli-lähde-kartta',
  devServer: {
    contentBase: './dist',
    kuuma: totta
  },
  moduuli: {
    säännöt:
      {
        testi: /\.js$/,
        sulje pois: / node_modules /,
        kuormaaja: 'babel-loader'
      },
      {
        testi: /\.js$/,
        sulje pois: / node_modules /,
        kuormain: 'eslint-loader',
        vaihtoehdot: {
          muotoilija: tyylikäs
         }
       }
     ]
   },
   plugins: [
    // uusi webpack.SourceMapDevToolPlugin ({
    // tiedostonimi: '[tiedosto] .map',
    // moduleFilenameTemplate: määrittelemätön,
    // fallbackModuleFilenameTemplate: määrittelemätön,
    // liitä: nolla,
    // moduuli: totta,
    // sarakkeet: totta,
    // lineToLine: false,
    // noLähteet: vääriä,
    // nimitila: ''
    //}),
    uusi CleanWebpackPlugin ('dist', {}),
    uusi HtmlWebpackPlugin ({
      pistä: väärä,
      hash: totta,
      malli: './src/index.html',
      tiedostonimi: 'index.html'
    }),
    uusi WebpackMd5Hash (),
    // uusi verkkopakkaus.NamedModulesPlugin (),
    uusi verkkopakkaus.HotModuleReplacementPlugin ()
  ]
};

package.json

{
"nimi": "viesti",
"versio": "1.0.0",
"kuvaus": "",
"main": "index.js",
"skriptit": {
  "kertomuskirja": "aloituskirjakirja -p 9001 -c .kirjakirja",
  "dev": "webpack-dev-server --mode kehitys --open",
  "rakentaa": "webpack - tilatuotanto"
},
"kirjailija": "",
"lisenssi": "ISC",
"devDependencies": {
  "@ kertomuskirja / lisäosa-toiminnot": "^ 3.4.3",
  "@ kertomuskirja / reagoi": "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",
  "kauneampi": "^ 1.12.1",
  "reagoi": "^ 16.3.2",
  "react-dom": "^ 16.3.2",
  "verkkopakkaus": "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"
},
"riippuvuudet": {
  "lähde-kartta-tuki": "^ 0.5.5"
}
}

Jätin heidät ehjäksi tarkoituksella, jotta voit nähdä virheenkorjausyritykseni. Kaikki toimi, paitsi lähdekarttoja. Alla kerron, mitä hän muutti kokoonpanossani - mutta tietysti on parempi tarkistaa koko vetämispyyntö täältä.

 // verkkopakkaus v4.6.0
 const polku = vaadi ('polku');
 const HtmlWebpackPlugin = vaadi ('html-webpack-plugin');
 // tämän moduulin poistaminen konfiguroinnista
-const WebpackMd5Hash = vaadi ('webpack-md5-hash');
 const CleanWebpackPlugin = vaadi ('clean-webpack-plugin');
 const tyylikäs = vaadi ('eslint / lib / formatters / tyylikäs');
 const webpack = vaadi ('webpack');
 
 module.exports = {
  // tilatila-asetuksen lisääminen tähän lipun sijasta
+ tila: 'kehitys',
   merkintä: {main: './src/index.js'},
   lähtö: {
  // polun ja mallin poistaminen tuotosta
- devtoolModuleFilenameTemplate: info =>
- 'tiedosto: //' + polku.resolve (info.absoluteResourcePath) .korvaa (/ \\ / g, '/'),
- polku: polku.resolve (__ dirname, 'dist'),
     tiedostonimi: '[nimi]. [hash] .js "
   },
  // lisäämällä ratkaisuvaihtoehto tähän
+ ratkaise: {
+ laajennukset: ['.js', '.jsx']
+},
   // devtool-vaihtoehdon muuttaminen
   devtool: 'eval-halpa-moduuli-lähde-kartta',
  // devServer-asetusten muuttaminen
   devServer: {
- contentBase: './dist',
- kuuma: totta
+ kuuma: totta,
+ avoin: totta
   },
   moduuli: {
     säännöt:
    // asettaa kaksi sekkini yhteen (myöhemmin hän pyysi minua chatissa poistamaan eslint-vaihtoehdon kokonaan)
       {
- testi: /\.js$/,
- sulje pois: / node_modules /,
- kuormain: 'babel-loader'
-},
- {
- testi: /\.js$/,
+ testi: /\.jsx?$/,
         sulje pois: / node_modules /,
- kuormaaja: 'eslint-loader',
- vaihtoehdot: {
- muotoilija: tyylikäs
-}
+ käyttö: [
+ {loader: 'babel-loader'},
+ {loader: 'eslint-loader', vaihtoehdot: {muotoilija: tyylikäs}}
+]
       }
     ]
   },
   plugins: [
    // puhdisti joitain vaihtoehtoja
- uusi CleanWebpackPlugin ('dist', {}),
+ uusi CleanWebpackPlugin ('dist'),
    // poisti joitain asetuksia HTMLWebpackPluginista
     uusi HtmlWebpackPlugin ({
- injektio: väärä,
- hash: totta,
- malli: './src/index.html',
- tiedostonimi: 'index.html'
+ malli: './src/index.html'
     }),
  // poisti hajautuslaajennuksen kokonaan ja lisäsi uuden moduulin korvaavan
- uusi WebpackMd5Hash (),
- uusi verkkopakkaus.NamedModulesPlugin (),
+ uusi verkkopakkaus.HotModuleReplacementPlugin ()
   ]
 };

package.json

"main": "index.js",
   "skriptit": {
     "kertomuskirja": "aloituskirjakirja -p 9001 -c .kirjakirja",
  // lisäsi eri liput webpack-dev-serverille
- "dev": "webpack-dev-server --tilan kehittäminen --avaa",
+ "dev": "webpack-dev-server --config ./webpack.config.js",
     "rakentaa": "webpack - tilatuotanto"
   },
   "kirjailija": "",
@@ -31,11 +31,6 @@
     "react-dom": "^ 16.3.2",
     "verkkopakkaus": "v4.6.0",
     "webpack-cli": "^ 2.0.13",
- "webpack-dev-server": "v3.1.3",
- "webpack-md5-hash": "0.0.6",
- "webpack-palvel": "^ 0.3.1"
-},
- "riippuvuudet": {
// siirretty dev-palvelin riippuvuuksiin
- "lähde-kartta-tuki": "^ 0.5.5"
+ "webpack-dev-server": "v3.1.3"
   }
 }

Kuten näette, hän poisti joukon moduuleja ja lisäsi tilan konfiguroinnin sisälle. Ja tarkastellessaan vetopyyntöä voit nähdä, että hän lisäsi myös jonkin erityisen reagoimaan suuntautuneen HMR: n.

Tämä auttoi lähdekarttoja toimimaan uhraamalla paljon laajennuksia, mutta ei ollut konkreettista selitystä miksi hän teki sen mitä teki. Asiakirjoja lukevana ihmisenä tämä ei ollut minulle kovin tyydyttävää.

Myöhemmin otin alkuperäisen webpack.connfig.js -sovelluksen ja aloin lisätä muutoksia askel askeleelta myös nähdä, milloin lähdekartat alkoivat lopulta toimia.

Muutos 1:

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

Muutos 2:

Lisäsin webpack-dev-serverin riippuvuuksiin, ei devDependencies:

...
},
"riippuvuudet": {
  "webpack-dev-server": "^ 3.1.3"
}
}
...

Muutos 3:

Seuraavaksi poistin joitain devServer-asetuksia:

devServer: {
- contentBase: './dist',
+ kuuma: totta,
+ avoin: totta
   },

Muutos 4:

Poistetaan tyylikäs:

...
},
devtool: 'inline-source-map',
  devServer: {
    kuuma: totta,
    avoin: totta
  },
...
käytä: [
  {loader: 'babel-loader'},
  {
    kuormain: 'eslint-loader'
  }
]
....

Muutos 5:

Yritetään poistaa WebpackMd5Hash-hajautuslaajennus nyt:

...
module.exports = {
tila: 'kehitys',
merkintä: {main: './src/index.js'},
lähtö: {
  polku: polku.resolve (__ dirname, 'dist'),
  tiedostonimi: '[nimi] .js'
  },
devtool: 'inline-source-map',
...
plugins: [
  uusi CleanWebpackPlugin ('dist'),
  uusi HtmlWebpackPlugin ({
    pistä: väärä,
    hash: totta,
    malli: './src/index.html',
    tiedostonimi: 'index.html'
  })
- uusi WebpackMd5Hash (),
 ]
};

Muutos 6:

Yritetään nyt poistaa joitain asetuksia HtmlWebpackPluginista:

...
plugins: [
  uusi CleanWebpackPlugin ('dist'),
  uusi HtmlWebpackPlugin ({
    malli: './src/index.html'
  })
]};
...

Muutos 7:

Kuten hänen koodissaan voidaan nähdä, hän lisäsi tähän joitain ratkaisuvaihtoehtoja. En henkilökohtaisesti ymmärrä miksi tarvitsemme heitä täällä. En myöskään löytänyt tietoja asiakirjoista.

...
ratkaista: {
  laajennukset: ['.js', '.jsx']
},
moduuli: {
...

Muutos 8:

Poistetaan lähtöpolku:

...
merkintä: {main: './src/index.js'},
lähtö: {
  tiedostonimi: '[nimi] .js'
},
devtool: 'inline-source-map',
...

Muutos 9:

Kuuman moduulin korvaavan laajennuksen lisääminen:

...
const HtmlWebpackPlugin = vaadi ('html-webpack-plugin');
const CleanWebpackPlugin = vaadi ('clean-webpack-plugin');
const webpack = vaadi ('webpack');
...
plugins: [
  uusi CleanWebpackPlugin ('dist'),
  uusi HtmlWebpackPlugin ({
    malli: './src/index.html'
  }),
  uusi verkkopakkaus.HotModuleReplacementPlugin ()
]
};
...

Vaihda 10:

Lisäys - config pakettiin.json:

- "dev": "webpack-dev-server --tilan kehittäminen --avaa",
+ "dev": "webpack-dev-server --config ./webpack.config.js",

Tehdään jotain selväksi: tässä vaiheessa olin melkein kirjoittanut kokoonpanon uudelleen.

Tämä on valtava asia, koska emme voi vain kirjoittaa sitä uudelleen joka kerta, kun jokin ei toimi!

Luo-reagoi-sovellus parhaassa lähteessä oppiaksesi verkkopaketista

Viimeisenä keinona menin tarkistamaan, kuinka luo-reagoi-sovellus toteuttaa lähteen kartoituksen. Se oli loppujen lopuksi oikea päätös. Tämä on webpack dev-version kokoonpano.

Jos tarkistamme, kuinka devtool toteutetaan siellä, näemme:

// Haluat ehkä "eval" sen sijaan, jos haluat nähdä käännetyn tulosteen DevToolsissa.
// Katso keskustelu osoitteessa https://github.com/facebook/create-react-app/issues/343.
devtool: 'halpa-moduuli-lähde-kartta'

Joten tämä kysymys johdatti minut toiseen, täältä löytyvään asiaan.

// verkkopakkaus v4
const polku = vaadi ('polku');
const HtmlWebpackPlugin = vaadi ('html-webpack-plugin');
const WebpackMd5Hash = vaadi ('webpack-md5-hash');
const CleanWebpackPlugin = vaadi ('clean-webpack-plugin');
module.exports = {
tila: "kehitys",
merkintä: {main: './src/index.js'},
lähtö: {
  polku: polku.resolve (__ dirname, 'dist'),
  tiedostonimi: '[nimi]. [hash] .js "
},
devtool: 'halpa moduuli-lähde-kartta',
devServer: {
  contentBase: './dist',
  kuuma: totta,
  avoin: totta
},
moduuli: {

Linjojen vaihtaminen ei edelleenkään toiminut - vielä! Olen oppinut, että lähdekartta on pitkään ripustettava aihe.

Kysy oikeilta ihmisiltä

Jokaisessa avoimen lähdekoodin projektissa on ylläpitäjiä. Joten tässä tapauksessa se oli ehdottomasti oikea tapa kysyä kaverit heti.

Vaikka Danielin kokeilu- ja virhemenetelmä ei todellakaan toiminut minulle, olin yllättäen yllättynyt ylläpitäjätiimin liikkuvuudesta.

Joten loin repon asennuksella, jonka voit nähdä täältä. Katso toinen sitoumus siellä.

Jotta se olisi sinulle helpompaa, tässä on projekti webpack.js, jossa siirryin takaisin alkuperäiseen, puhtaampaan asennukseen:

// verkkopakkaus v4
const polku = vaadi ('polku');
const HtmlWebpackPlugin = vaadi ('html-webpack-plugin');
const WebpackMd5Hash = vaadi ('webpack-md5-hash');
const CleanWebpackPlugin = vaadi ('clean-webpack-plugin');
module.exports = {
  tila: 'kehitys',
  merkintä: {main: './src/index.js'},
  lähtö: {
    polku: polku.resolve (__ dirname, 'dist'),
    tiedostonimi: '[nimi]. [hash] .js "
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    kuuma: totta,
    avoin: totta
  },
  moduuli: {
    säännöt:
      {
        testi: /\.js$/,
        sulje pois: / node_modules /,
        käytä: [
          {loader: 'babel-loader'},
          {
            kuormain: 'eslint-loader',
            vaihtoehdot: {
              muotoilija: vaaditaan ('eslint / lib / muotoilijat / tyylikäs')
            }
          }
         ]
        }
      ]
  },
  plugins: [
    uusi CleanWebpackPlugin ('dist'),
    uusi HtmlWebpackPlugin ({
      pistä: väärä,
      hash: totta,
      malli: './src/index.html',
      tiedostonimi: 'index.html'
    }),
    uusi WebpackMd5Hash ()
  ]
};

Tarkistanutani koodini, ylläpitäjä loi ongelman.

Katsotaanpa mitä hän sisälsi:

Tilavaihtoehdon asettaminen
Ensimmäinen löysi ongelma siitä, kuinka tilavaihtoehto asetettiin. Npm-komentosarjoissa tila asetettiin seuraavasti:
webpack - mallituotanto
Oikea tapa olisi:
verkkopakkaus - malli = tuotanto
Npm-skriptien lopullinen tila näyttää minusta:
"skriptit": {
 "build": "webpack - mode = production",
 "start": "webpack-dev-server --mode = kehitys --hot"
}
Muutin myös dev aloittamaan, koska se on standardimpaa ja odotettavissa muilta kehittäjiltä komennolla. Voit tosiasiallisesti tehdä npm-käynnistyksen ilman ajokomentoa
...
"skriptit": {
  "rakentaa": "webpack - tilatuotanto",
  "dev": "webpack-dev-server --mode = kehitys --hot"
},
...

Seuraavaksi hän ehdotti seuraavaa:

devtool lähdekarttoihin
Suosittelen aina inline-source-map -vaihtoehtoa, se on kaikkein suoraviivaisin ja se sisältyy pakettiin itse kommenttina sen lopussa.
module.exports = {
+ devtool: 'inline-source-map',
 // muu konfiguraatio
}
Suosittelen myös erillisen objektin luomista ja sen kannattamista vain kehityksen yhteydessä:
komento
webpack-dev-server - mode = kehitys NODE_ENV = kehitys
webpack.config.js
const webpackConfig = {}
if (process.env.NODE_ENV === 'kehitys') {
 webpackConfig.devtool = 'inline-source-map'
}
Tällä tavoin voit varmistaa, että tämä ei vaikuta tuotantokokonaisuuteen.

Sitten hän ehdotti ESLintin poistamista kuormaajista:

Maalaus ja kehittäjäkokemus
Oikeasti, poistan eslintin kuormaajana, se on erittäin roskapostinen ja se sekoittuu kehitysvirtaan. Pidän parempana lisätä ennakkositoumuksen ohjekirja tämän tarkistamiseksi.
Tämä on erittäin helppoa lisäämällä skripti näin:
"skriptit": {
+ "nukkaa": "eslint ./src/**/*.js"
 "build": "webpack - mode = production",
 "start": "webpack-dev-server --mode = kehitys --hot"
}
Ja sitten yhdistämällä se huskyyn.

ja lisäämällä se skripteihin:

...
"skriptit": {
"lint": "eslint ./src/**/*.js",
"rakentaa": "webpack - tilatuotanto",
"dev": "webpack-dev-server --mode = kehitys --hot"
},
...

Tein virheen src / Hello.js -palvelussa tarkoituksella nähdäkseni kuinka lähdekartat toimivat tällä kertaa.

tuo reagoida 'reagoida';
tuoda PropTypes 'prop-tyypeistä';
luokka Hello laajentaa React.Component {
  console.log (hello.world);
  tehdä () {
    palauta 
{this.props.hello}
;   } } Hello.propTypes = {   hei: PropTypes.string }; vienti oletus Hei;

Kuinka korjain asian

Aihe oli EsLint. Mutta kun olet määrittänyt tilat oikein ja poistanut eslint-loader, lähdekartat toimivat hyvin!

Ylläpitäjän minulle antaman esimerkin jälkeen päivitin verkkopakkaukseni:

// verkkopakkaus v4
const polku = vaadi ('polku');
const HtmlWebpackPlugin = vaadi ('html-webpack-plugin');
const WebpackMd5Hash = vaadi ('webpack-md5-hash');
const CleanWebpackPlugin = vaadi ('clean-webpack-plugin');
module.exports = {
  merkintä: {main: './src/index.js'},
  lähtö: {
    polku: polku.resolve (__ dirname, 'dist'),
    tiedostonimi: '[nimi]. [hash] .js "
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    kuuma: totta,
    avoin: totta
  },
  moduuli: {
    säännöt:
     {
      testi: /\.js$/,
      sulje pois: / node_modules /,
      käytä: [{loader: 'babel-loader'}]
     }
    ]
  },
  plugins: [
    uusi CleanWebpackPlugin ('dist'),
    uusi HtmlWebpackPlugin ({
      pistä: väärä,
      hash: totta,
      malli: './src/index.html',
      tiedostonimi: 'index.html'
    }),
    uusi WebpackMd5Hash ()
  ]
};

ja paketti JSON osoitteeseen

{
"nimi": "viesti",
"versio": "1.0.0",
"kuvaus": "",
"main": "index.js",
"skriptit": {
  "build": "webpack - mode = production",
  "start": "NODE_ENV = kehitys webpack-dev-server - mode = kehitys --hot"
},
"kirjailija": "",
"lisenssi": "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",
  "kauneampi": "^ 1.12.1",
  "reagoi": "^ 16.3.2",
  "react-dom": "^ 16.3.2",
  "verkkopakkaus": "^ 4.6.0",
  "webpack-cli": "^ 2.0.13",
  "webpack-md5-hash": "0.0.6"
},
"riippuvuudet": {
  "webpack-dev-server": "^ 3.1.3"
}
}

Lopuksi lähdekartat toimivat!

johtopäätökset:

Lähdekartoista on käyty useita keskusteluja ja virheitä vuodesta 2016, kuten näet täältä.

Webapack tarvitsee apua auditoinnissa!

Löydettyään tämän virheen lähetin ongelman ESLint loader -pakettiin.

Lähdekarttojen laadun tarkistamisessa voimme käyttää tätä työkalua.

Mitä voit tehdä, jos sinulla on verkkopakkausongelma?

Jos törmäät Webpack-ongelmaan, älä paniikki! Noudata näitä vaiheita:

  • Etsi GitHub-julkaisuistasi samanlaisia ​​aiheita kuin sinun.
  • Yritä tarkistaa kattilalevyt ja nähdä, kuinka ominaisuus on siellä toteutettu, kuten esimerkiksi luoda-reagoida-sovellus.
  • Kysy StackOverflow-sivustolta - älä pelkää! Varmista kuitenkin, että sinulla on loppunut tapoja ratkaista ongelma itse.
  • Älä epäröi jaa siitä ja kysy ylläpitäjiä suoraan.
  • Luo ongelmia, kun löydät ne. Tämä auttaa kirjoittajia paljon!

Olen tässä artikkelissa toimittanut sinulle asetustiedostoni ja prosessin, jolla määrittelin sen askel askeleelta.

Huomaa: Koska monet npm-riippuvuudet saattavat muuttua ajankohtaan, kun luet tämän, sama kokoonpano ei ehkä toimi sinulle! Pyydämme sinua jättämään virheet alla oleviin kommentteihin, jotta voin muokata niitä myöhemmin.

Ole hyvä, tilaa ja napsauta tätä artikkelia! Kiitos!