Hvordan jeg løste og debuggerede mit Webpack-problem ved hjælp af prøve, fejl og lidt udenhjælp.

Se originalen på: https://www.instagram.com/p/BdCxrMcn-k5/?taken-by=riittagirl

Jeg vil sige, at dette var en ganske rejse. Jeg vidste, at Webpack ikke var let at konfigurere: der er mange dele med mange indstillinger, der er npm helvede, og de ændrer sig med nye udgivelser. Ikke underligt, at det let kan blive en besværlig opgave at fejlsøge, når noget ikke går som forventet (dvs. ikke som det er i dokumenterne).

Forsøger at fejlsøge

Min debugging-rejse startede med følgende opsætning:

webpack.config.js

// webpack v4.6.0
const path = kræve ('sti');
const HtmlWebpackPlugin = kræver ('html-webpack-plugin');
const WebpackMd5Hash = kræve ('webpack-md5-hash');
const CleanWebpackPlugin = kræver ('ren-webpack-plugin');
const webpack = kræve ('webpack');
module.exports = {
  post: {main: './src/index.js'},
  output: {
    sti: path.resolve (__ dirname, 'dist'),
    filnavn: '[navn]. [chunkhash] .js'
  },
  devServer: {
    contentBase: './dist',
    hot: sandt,
    åben: sandt
  },
  modul: {
    regler: [
      {
        test: /\.js$/,
        ekskludere: / node_modules /,
        brug: [
          {loader: 'babel-loader'},
          {
            loader: 'eslint-loader',
            muligheder: {
              formater: kræver ('eslint / lib / formatters / stylish')
            }
           }
         ]
       }
     ]
  },
  plugins: [
    nye CleanWebpackPlugin ('dist', {}),
    ny HtmlWebpackPlugin ({
      injicere: falsk,
      hash: sandt,
      skabelon: './src/index.html',
      filnavn: 'indeks.html'
    }),
    ny WebpackMd5Hash ()
  ]
};

package.json

{
  "name": "post",
  "version": "1.0.0",
  "beskrivelse": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack - modeproduktion",
    "dev": "webpack-dev-server"
   },
  "forfatter": "",
  "licens": "ISC",
  "afhængighed": {
    "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",
    "pænere": "^ 1.12.1",
    "react": "^ 16.3.2",
    "react-dom": "^ 16.3.2",
    "webpack": "^ 4.6.0",
    "webpack-cli": "^ 2.0.13",
    "webpack-dev-server": "^ 3.1.3",
    "webpack-md5-hash": "0.0.6"
  }
}

.babelrc

{
  "presets": ["env", "react"]
}

.eslintrc.js

module.exports = {
  env: {
    browser: sandt,
    commonjs: sandt,
    es6: sandt
  },
  strækker sig: [
    'Eslint: anbefales',
    'Plugin: reagere / anbefales',
    'Smukkere',
    'Plugin: pænere / anbefales'
  ],
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: sandt,
      jsx: sandt
    },
    sourceType: 'modul'
  },
  plugins: ['react', 'prettier'],
  regler: {
    indrykning: ['fejl', 2],
    'linebreak-style': ['error', 'unix'],
    citater: ['advare', 'enkelt'],
    semi: ['fejl', 'altid'],
    'ikke-ubrugt-vars': [
      'advare',
      {vars: 'alle', argumenterer: 'ingen', ignorerRestSøskende: falsk}
    ],
    'prettier / prettier': 'error'
   }
};

prettier.config.js

// .prettierrc.js
module.exports = {
  printBredde: 80,
  fanebredde: 2,
  semi: sandt,
  singleQuote: sandt,
  bracketSpacing: sandt
};

Og i src / mappen:

index.html


  
 
    
      

index.js

import React fra 'react';
import {render} fra 'react-dom';
import Hello fra './Hello';
klasse-app udvider React.Component {
  render () {
    Vend tilbage (
      
                   );   } } render (, document.getElementById ('app'));

Hello.js

import React fra 'react';
import PropTypes fra 'prop-typer';
klasse Hello udvider React.Component {
  render () {
    returner 
{this.props.hello}
;   } }
Hello.propTypes = {
  hej: PropTypes.string
};
eksport standard Hello;

Dette var den overordnede projektstruktur:

Så hvad var problemet?

Som du kan se, oprettede jeg miljøet, ESLinting osv. Jeg skabte alt, så jeg kunne begynde at kode og tilføje mine nye komponenter til mit skinnende nye komponentbibliotek.

Men hvad nu hvis jeg fik en fejl? Lad os skrue noget op.

Hvis vi forsøger at trække oprindelsen af ​​fejlen tilbage fra vores Google Chrome browserkonsol, vil dette være meget vanskeligt for os. Vi ville snuble over noget som dette:

Kildekortene er ikke konfigureret!

Jeg vil have, at den peger på en fil Hello.js og ikke på en bundtet fil, som den fyr gjorde her.

Dette er sandsynligvis en lille ting

Eller så tænkte jeg. Så jeg prøvede at konfigurere kildekortene som beskrevet i dokumenterne ved at tilføje devtool.

Når webpack bundter din kildekode, kan det blive vanskeligt at spore fejl og advarsler til deres oprindelige placering. For eksempel, hvis du bundter tre kildefiler (a.js, b.js og c.js) i et bundt (bundle.js), og en af ​​kildefilerne indeholder en fejl, peger stakesporet ganske enkelt på bundt. js. Dette er ikke altid nyttigt, da du sandsynligvis vil vide nøjagtigt, hvilken kildefil fejlen kom fra.
For at gøre det lettere at spore fejl og advarsler tilbyder JavaScript kildekort, der kortlægger din kompilerede kode tilbage til din originale kildekode. Hvis en fejl stammer fra b.js, vil kildekortet fortælle dig nøjagtigt det. (Kilde)

Så jeg antog naivt, at dette ville fungere i min webpack.config.js:

...
module.exports = {
  post: {main: './src/index.js'},
  output: {
    sti: path.resolve (__ dirname, 'dist'),
    filnavn: '[navn]. [chunkhash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: sandt,
    åben: sandt
  },
  ...

og package.json

...
"scripts": {
  "build": "webpack - modeproduktion",
  "dev": "webpack-dev-server - modudvikling"
}
...

Du skal tilføje et udviklingsflag, når du gør det, ellers fungerer det ikke som dokumenterne siger. Selv med den foreslåede værdi handlede kildekortet ikke, som jeg ville have det.

Hvis du læser denne guide fra SurviveJS, som du burde, vil du se.

Efter at jeg prøvede alle muligheder fra det, brugte jeg mig til GitHub-emnejagt.

GitHub-emnejagt

At prøve alle forslagene i GitHub-spørgsmål hjalp mig ikke.

På et tidspunkt troede jeg, at der var noget galt med webpack-dev-server. Og det viste sig, at webpack-dev-serveren allerede har været i vedligeholdelsestilstand i et par måneder.

Jeg opdagede, at efter at jeg snublede over dette problem, hvor de anbefaler at bruge webpack-serve i stedet for webpack-dev-server.

Helt ærligt, det var første gang, jeg havde hørt om et alternativ kaldet webpack-serve. Dokumenterne så heller ikke lovende ud. Men jeg besluttede stadig at give det et skud.

npm installere webpack-serve - save-dev

Jeg oprettede serve.config.js

const serve = kræve ('webpack-serve');
const config = kræver ('./ webpack.config.js');
server ({config});

Jeg erstattede webpack-dev-server med webpack serve i min package.json.

Men at prøve webpack-serve løste det heller ikke.

Så på dette tidspunkt følte jeg, at jeg havde brugt alle forslag, jeg kunne finde på GitHub:

  • Webpack 4 - Surcemaps: dette spørgsmål antyder, at devtool: 'kildekort' skulle arbejde ud af kassen, men det var ikke tilfældet for mig
  • hvordan man laver webpack sourcemap til originale filer: tilføje devtoolModuleFilenameTemplate: info => 'fil: //' + path.resolve (info.absoluteResourcePath) .replace (/ \ \ / g, '/') til min outputkonfiguration hjalp ikke meget. Men i stedet for client.js, viste det mig index.js.
  • https://github.com/webpack/webpack/issues/6400: denne er ikke en nøjagtig beskrivelse af mit problem, så det at prøve at bruge metoderne her syntes ikke at hjælpe mig
  • Jeg forsøgte at bruge webpack.SourceMapDevToolPlugin, men det fungerede ikke med min opsætning, selv når jeg slettede devtools eller indstillede dem til falske
  • Jeg brugte ikke UglifyJS-pluginet her, så opsætning af indstillinger for det var ikke en løsning
  • Jeg ved, at webpack-dev-server er i vedligeholdelse nu, så jeg prøvede webpack-serve, men det så ud som om kildekort ikke fungerer med det heller
  • Jeg prøvede også kildekort-support-pakken, men der var ikke noget held der. Jeg har en lignende situation som her.

Den hellige stakoverflyt

Det tog mig for evigt at konfigurere kildekort, så jeg oprettede et problem på StackOverflow.

Fejlsøgning af webpack-config er normalt en besværlig opgave: den bedste måde at gøre det på er at oprette en config fra en bund. Hvis noget fra dokumentationen ikke fungerer som forventet, kan det være en god ide at prøve at finde et lignende problem på en gren eller oprette dit eget emne. Jeg troede det alligevel.

Den første fyr, der besvarede mit spørgsmål, prøvede virkelig at hjælpe. Han delte sin egen arbejdskonfigur. Selv hjalp mig ved at oprette en pull-anmodning.

Det eneste problem her: hvorfor fungerer hans opsætning? Jeg mener, dette er sandsynligvis ikke magi, og der er en vis modulkompatibilitet der. Desværre kunne jeg ikke forstå, hvorfor min opsætning ikke fungerede:

Sagen er, at han gjorde det med de bedste intentioner ved at omstrukturere projektet på sin måde.

Dette betød, at jeg ville have noget mere opsætning i projektet og skulle ændre en hel del ting. Det kunne have været ok, hvis jeg lavede en testopsætning, men jeg besluttede at foretage de gradvise ændringer af filerne for at se, hvor det brød.

Afskærer problemet

Så lad os se på forskellene mellem hans Webpack og package.json og min. Bare til optegnelsen brugte jeg en anden repo i spørgsmålet, så her er mit link til repoen og min opsætning.

// webpack v4.6.0
const path = kræve ('sti');
const HtmlWebpackPlugin = kræver ('html-webpack-plugin');
const WebpackMd5Hash = kræve ('webpack-md5-hash');
const CleanWebpackPlugin = kræver ('ren-webpack-plugin');
const stilfuld = kræver ('eslint / lib / formatters / stylish');
const webpack = kræve ('webpack');
module.exports = {
  post: {main: './src/index.js'},
  output: {
   devtoolModuleFilenameTemplate: info => 'fil: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/'),
   sti: path.resolve (__ dirname, 'dist'),
   filnavn: '[navn]. [hash] .js'
  },
  tilstand: 'udvikling',
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    contentBase: './dist',
    hot: sandt
  },
  modul: {
    regler: [
      {
        test: /\.js$/,
        ekskludere: / node_modules /,
        loader: 'babel-loader'
      },
      {
        test: /\.js$/,
        ekskludere: / node_modules /,
        loader: 'eslint-loader',
        muligheder: {
          formater: stilfuld
         }
       }
     ]
   },
   plugins: [
    // ny webpack.SourceMapDevToolPlugin ({
    // filnavn: '[fil] .map',
    // moduleFilenameTemplate: undefined,
    // fallbackModuleFilenameTemplate: undefined,
    // tilføj: null,
    // modul: sandt,
    // kolonner: sandt,
    // lineToLine: falsk,
    // noKilder: falske,
    // navneområde: ''
    //}),
    nye CleanWebpackPlugin ('dist', {}),
    ny HtmlWebpackPlugin ({
      injicere: falsk,
      hash: sandt,
      skabelon: './src/index.html',
      filnavn: 'indeks.html'
    }),
    nye WebpackMd5Hash (),
    // ny webpack.NamedModulesPlugin (),
    ny webpack.HotModuleReplacementPlugin ()
  ]
};

package.json

{
"name": "post",
"version": "1.0.0",
"beskrivelse": "",
"main": "index.js",
"scripts": {
  "storybook": "start-storybook -p 9001 -c .storybook",
  "dev": "webpack-dev-server - udvikling af mode --open",
  "build": "webpack - modeproduktion"
},
"forfatter": "",
"licens": "ISC",
"afhængighed": {
  "@ storybook / addon-actions": "^ 3.4.3",
  "@ storybook / react": "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",
  "pænere": "^ 1.12.1",
  "react": "^ 16.3.2",
  "react-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"
},
"afhængigheder": {
  "source-map-support": "^ 0.5.5"
}
}

Jeg forlod dem intakte med vilje, så du kan se mine fejlfindingsforsøg. Alt fungerede undtagen kildekort. Nedenfor vil jeg dele, hvad han ændrede i min config - men det er selvfølgelig bedre at kontrollere den fulde pull-anmodning her.

 // webpack v4.6.0
 const path = kræve ('sti');
 const HtmlWebpackPlugin = kræver ('html-webpack-plugin');
 // slette dette modul fra konfigurationen
-const WebpackMd5Hash = kræver ('webpack-md5-hash');
 const CleanWebpackPlugin = kræver ('ren-webpack-plugin');
 const stilfuld = kræver ('eslint / lib / formatters / stylish');
 const webpack = kræve ('webpack');
 
 module.exports = {
  // tilføje indstillingsindstillingen her i stedet for et flag
+ tilstand: 'udvikling',
   post: {main: './src/index.js'},
   output: {
  // slette stien og skabelonen fra output
- devtoolModuleFilenameTemplate: info =>
- 'fil: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/'),
- sti: path.resolve (__ dirname, 'dist'),
     filnavn: '[navn]. [hash] .js'
   },
  // tilføjelse af løsningsmulighed her
+ løsning: {
+ udvidelser: ['.js', '.jsx']
+},
   // ændring af devtool-indstillingen
   devtool: 'eval-cheap-module-source-map',
  // ændring af devServer-indstillingerne
   devServer: {
- contentBase: './dist',
- hot: sandt
+ hot: sandt,
+ åben: sandt
   },
   modul: {
     regler: [
    // sætte mine to kontroller i en (senere bad han mig i chatten om at slette eslint-indstillingen helt)
       {
- test: /\.js$/,
- ekskluder: / node_modules /,
- loader: 'babel-loader'
-},
- {
- test: /\.js$/,
+ test: /\.jsx?$/,
         ekskludere: / node_modules /,
- loader: 'eslint-loader'
-        muligheder: {
- formater: stilfuld
-}
+ brug: [
+ {loader: 'babel-loader'},
+ {loader: 'eslint-loader', indstillinger: {formatter: stilfuld}}
+]
       }
     ]
   },
   plugins: [
    // rengøres nogle muligheder
- nyt CleanWebpackPlugin ('dist', {}),
+ ny CleanWebpackPlugin ('dist'),
    // slettede nogle indstillinger fra HTMLWebpackPlugin
     ny HtmlWebpackPlugin ({
- injicere: falsk,
- hash: sandt,
- skabelon: './src/index.html',
- filnavn: 'indeks.html'
+ skabelon: './src/index.html'
     }),
  // fjernede hashing-pluginet fuldstændigt og tilføjede en hot modulerstatning
- ny WebpackMd5Hash (),
- ny webpack.NamedModulesPlugin (),
+ ny webpack.HotModuleReplacementPlugin ()
   ]
 };

package.json

"main": "index.js",
   "scripts": {
     "storybook": "start-storybook -p 9001 -c .storybook",
  // tilføjet forskellige flag til webpack-dev-server
- "dev": "webpack-dev-server - udvikling af mode --open",
+ "dev": "webpack-dev-server --config ./webpack.config.js",
     "build": "webpack - modeproduktion"
   },
   "forfatter": "",
@@ -31,11 +31,6 @@
     "react-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"
-},
- "afhængigheder": {
// flyttede dev-serveren til afhængigheder
- "source-map-support": "^ 0.5.5"
+ "webpack-dev-server": "v3.1.3"
   }
 }

Som du kan se, slettede han en masse moduler og tilføjede tilstand inde i konfigurationen. Og kigger på pull-anmodningen, kan du se, at han også tilføjede nogle specifikke reaktionsorienterede HMR.

Dette hjalp kildekortene med at ofre en masse plugins, men der var ingen konkret forklaring på, hvorfor han gjorde, hvad han gjorde. Som en person, der læser dokumenterne, var dette ikke meget tilfredsstillende for mig.

Senere tog jeg min første webpack.connfig.js og begyndte at tilføje ændringerne trin for trin for også at se, når kildekortene endelig begyndte at arbejde.

Skift 1:

- nyt CleanWebpackPlugin ('dist', {}),
+ ny CleanWebpackPlugin ('dist'),

Skift 2:

Jeg føjede webpack-dev-server til afhængigheder, ikke dev afhængigheder:

...
},
"afhængigheder": {
  "webpack-dev-server": "^ 3.1.3"
}
}
...

Skift 3:

Dernæst fjernede jeg nogle devServer-indstillinger:

devServer: {
- contentBase: './dist',
+ hot: sandt,
+ åben: sandt
   },

Skift 4:

Lad os fjerne stilfulde:

...
},
devtool: 'inline-source-map',
  devServer: {
    hot: sandt,
    åben: sandt
  },
...
brug: [
  {loader: 'babel-loader'},
  {
    loader: 'eslint-loader'
  }
]
....

Skift 5:

Lad os prøve at fjerne WebpackMd5Hash hashing-pluginet nu:

...
module.exports = {
tilstand: 'udvikling',
post: {main: './src/index.js'},
output: {
  sti: path.resolve (__ dirname, 'dist'),
  filnavn: '[navn] .js'
  },
devtool: 'inline-source-map',
...
plugins: [
  nye CleanWebpackPlugin ('dist'),
  ny HtmlWebpackPlugin ({
    injicere: falsk,
    hash: sandt,
    skabelon: './src/index.html',
    filnavn: 'indeks.html'
  })
- ny WebpackMd5Hash (),
 ]
};

Skift 6:

Lad os prøve at fjerne nogle indstillinger fra HtmlWebpackPlugin:

...
plugins: [
  nye CleanWebpackPlugin ('dist'),
  ny HtmlWebpackPlugin ({
    skabelon: './src/index.html'
  })
]};
...

Skift 7:

Som vi kan se i hans kode, tilføjede han nogle løsningsmuligheder her. Jeg forstår personlig ikke, hvorfor vi har brug for dem her. Og jeg kunne heller ikke finde oplysningerne i dokumenterne.

...
beslutte: {
  udvidelser: ['.js', '.jsx']
},
modul: {
...

Skift 8:

Sletning af outputsti:

...
post: {main: './src/index.js'},
output: {
  filnavn: '[navn] .js'
},
devtool: 'inline-source-map',
...

Skift 9:

Tilføjelse af plug-in-modul til varmt modul:

...
const HtmlWebpackPlugin = kræver ('html-webpack-plugin');
const CleanWebpackPlugin = kræver ('ren-webpack-plugin');
const webpack = kræve ('webpack');
...
plugins: [
  nye CleanWebpackPlugin ('dist'),
  ny HtmlWebpackPlugin ({
    skabelon: './src/index.html'
  }),
  ny webpack.HotModuleReplacementPlugin ()
]
};
...

Skift 10:

Tilføjelse - config til package.json:

- "dev": "webpack-dev-server - udvikling af mode --open",
+ "dev": "webpack-dev-server --config ./webpack.config.js",

Lad os gøre noget klart: på dette tidspunkt havde jeg næsten skrevet om konfiguratet.

Dette er et massivt emne, da vi ikke bare kan omskrive det hver gang noget ikke fungerer!

Opret-reager-app i den bedste kilde for at lære om webpack

Som en sidste udvej gik jeg for at kontrollere, hvordan create-react-app implementerer kildekortlægningen. Det var trods alt den rigtige beslutning. Dette er konfigureringen af ​​webpack dev version.

Hvis vi kontrollerer, hvordan devtool implementeres der, vil vi se:

// Du ønsker muligvis 'eval' i stedet, hvis du foretrækker at se den kompilerede output i DevTools.
// Se diskussionen i https://github.com/facebook/create-react-app/issues/343.
devtool: 'billigt-modul-kildekort'

Så dette spørgsmål pegede mig på et andet emne, som findes her.

// webpack v4
const path = kræve ('sti');
const HtmlWebpackPlugin = kræver ('html-webpack-plugin');
const WebpackMd5Hash = kræve ('webpack-md5-hash');
const CleanWebpackPlugin = kræver ('ren-webpack-plugin');
module.exports = {
tilstand: "udvikling",
post: {main: './src/index.js'},
output: {
  sti: path.resolve (__ dirname, 'dist'),
  filnavn: '[navn]. [hash] .js'
},
devtool: 'billig-modul-kildekort',
devServer: {
  contentBase: './dist',
  hot: sandt,
  åben: sandt
},
modul: {

Ændring af linjer fungerede stadig ikke - endnu! Jeg lærte, at kildekortet er et langhængende problem.

Spørg fra de rigtige mennesker

Hvert open source-projekt har vedligeholdere. Så i dette tilfælde var det bestemt det rigtige skridt at spørge fyrene med det samme.

Selvom prøve- og fejlmetoden fra Daniel ikke rigtig fungerede for mig, blev jeg behageligt overrasket over, hvor mobil vedligeholderteamet var.

Så jeg oprettede en repo med den opsætning, du kan se her. Tjek den anden forpligtelse der.

For at gøre det lettere for dig, her er mit projekt webpack.js, hvor jeg rullede tilbage til min første, renere opsætning:

// webpack v4
const path = kræve ('sti');
const HtmlWebpackPlugin = kræver ('html-webpack-plugin');
const WebpackMd5Hash = kræve ('webpack-md5-hash');
const CleanWebpackPlugin = kræver ('ren-webpack-plugin');
module.exports = {
  tilstand: 'udvikling',
  post: {main: './src/index.js'},
  output: {
    sti: path.resolve (__ dirname, 'dist'),
    filnavn: '[navn]. [hash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: sandt,
    åben: sandt
  },
  modul: {
    regler: [
      {
        test: /\.js$/,
        ekskludere: / node_modules /,
        brug: [
          {loader: 'babel-loader'},
          {
            loader: 'eslint-loader',
            muligheder: {
              formater: kræver ('eslint / lib / formatters / stylish')
            }
          }
         ]
        }
      ]
  },
  plugins: [
    nye CleanWebpackPlugin ('dist'),
    ny HtmlWebpackPlugin ({
      injicere: falsk,
      hash: sandt,
      skabelon: './src/index.html',
      filnavn: 'indeks.html'
    }),
    ny WebpackMd5Hash ()
  ]
};

Efter kontrol af min kode oprettede vedligeholderen et problem.

Lad os sammenfatte, hvad han inkluderede der:

Indstilling af indstillingsindstilling
Det første problem, jeg har fundet, er, hvordan indstillingen af ​​tilstand var indstillet. I npm-scripts blev tilstanden indstillet til:
webpack - modeproduktion
Den rigtige måde ville være:
webpack - mode = produktion
Den endelige tilstand af npm-scripts ser sådan ud for mig:
"scripts": {
 "build": "webpack --mode = produktion",
 "start": "webpack-dev-server --mode = udvikling --hot"
}
Jeg skiftede også dev til at starte, da det er mere standard og forventes af andre udviklere som en kommando. Du kan faktisk starte npm-start uden kørekommandoen
...
"scripts": {
  "build": "webpack - modeproduktion",
  "dev": "webpack-dev-server --mode = udvikling --hot"
},
...

Dernæst foreslog han følgende:

devtool til kildekort
Jeg anbefaler altid inline-source-map indstillingen, det er den mest lige frem, og den er inkluderet i selve bundtet som en kommentar i slutningen af ​​det.
module.exports = {
+ devtool: 'inline-source-map',
 // resten af ​​din config
}
Jeg anbefaler også at oprette et separat objekt og kun befolke dette ved udvikling:
kommando
webpack-dev-server - mode = udvikling NODE_ENV = udvikling
webpack.config.js
const webpackConfig = {}
if (process.env.NODE_ENV === 'udvikling') {
 webpackConfig.devtool = 'inline-source-map'
}
På denne måde sikrer du dig, at bundtet om produktion ikke påvirkes af dette.

Derefter foreslog han at fjerne ESLint fra læsserne:

Fud- og udvikleroplevelse
Helt ærligt ville jeg slette eslint som en læsser, det er super spammy, og det kommer med udviklingsstrømmen. Jeg foretrækker at tilføje en forudgående githook for at kontrollere dette.
Dette er super let ved at tilføje et script som dette:
"scripts": {
+ "lint": "eslint ./src/**/*.js"
 "build": "webpack --mode = produktion",
 "start": "webpack-dev-server --mode = udvikling --hot"
}
Og så kombineres det med husky.

og tilføje det til scripts:

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

Jeg begik en fejl i src / Hello.js med vilje til at se, hvordan kildekort fungerede denne gang.

import React fra 'react';
import PropTypes fra 'prop-typer';
klasse Hello udvider React.Component {
  console.log (hello.world);
  render () {
    returner 
{this.props.hello}
;   } } Hello.propTypes = {   hej: PropTypes.string }; eksport standard Hello;

Hvordan jeg løste problemet

Spørgsmålet var EsLint. Men efter at have specificeret tilstande korrekt og fjernet eslint-loader, fungerede kildekort fint!

Efter eksemplet, som vedligeholderen gav mig, opdaterede jeg min Webpack til:

// webpack v4
const path = kræve ('sti');
const HtmlWebpackPlugin = kræver ('html-webpack-plugin');
const WebpackMd5Hash = kræve ('webpack-md5-hash');
const CleanWebpackPlugin = kræver ('ren-webpack-plugin');
module.exports = {
  post: {main: './src/index.js'},
  output: {
    sti: path.resolve (__ dirname, 'dist'),
    filnavn: '[navn]. [hash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: sandt,
    åben: sandt
  },
  modul: {
    regler: [
     {
      test: /\.js$/,
      ekskludere: / node_modules /,
      brug: [{loader: 'babel-loader'}]
     }
    ]
  },
  plugins: [
    nye CleanWebpackPlugin ('dist'),
    ny HtmlWebpackPlugin ({
      injicere: falsk,
      hash: sandt,
      skabelon: './src/index.html',
      filnavn: 'indeks.html'
    }),
    ny WebpackMd5Hash ()
  ]
};

og min pakke JSON til:

{
"name": "post",
"version": "1.0.0",
"beskrivelse": "",
"main": "index.js",
"scripts": {
  "build": "webpack --mode = produktion",
  "start": "NODE_ENV = udvikling af webpack-dev-server - mode = udvikling --hot"
},
"forfatter": "",
"licens": "ISC",
"afhængighed": {
  "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",
  "pænere": "^ 1.12.1",
  "react": "^ 16.3.2",
  "react-dom": "^ 16.3.2",
  "webpack": "^ 4.6.0",
  "webpack-cli": "^ 2.0.13",
  "webpack-md5-hash": "0.0.6"
},
"afhængigheder": {
  "webpack-dev-server": "^ 3.1.3"
}
}

Endelig arbejdede kildekort!

konklusioner:

Kildekort har været genstand for flere diskussioner og fejl siden 2016, som du kan se her.

Webapack har brug for hjælp til revision!

Efter at have fundet denne fejl sendte jeg et problem til ESLint-loader-pakken.

Når det kommer til at kontrollere kildekortets kvalitet, kan vi bruge dette værktøj.

Hvad kan du gøre, hvis du har et webpack-problem?

Hvis du snubler over et problem med Webpack, skal du ikke få panik! Følg disse trin:

  • Søg i GitHub-emner, der ligner dine.
  • Prøv at tjekke kedelplader og se, hvordan funktionen implementeres der, som f.eks. Create-react-app.
  • Stil spørgsmål til StackOverflow - vær ikke bange! Sørg dog for, at du er løbet tør for måder at løse dit problem på egen hånd.
  • Tøv ikke med at tweet om det, og spørg direkte vedligeholdere.
  • Opret problemer, når du finder dem. Dette vil hjælpe bidragydere meget!

I denne artikel har jeg givet dig min konfigurationsfil og processen, jeg brugte til at konfigurere den trin for trin.

Bemærk: da en masse npm-afhængigheder kan ændre sig, når du læser dette, fungerer den samme konfiguration muligvis ikke for dig! Jeg beder dig venligst om at give dine fejl i kommentarerne nedenfor, så jeg kan redigere dem senere.

Abonner og klap for denne artikel! Tak!