Webpack ist ein Modulbündler für JavaScript-Anwendungen. Es nimmt Module mit Abhängigkeiten und generiert statische Assets, die diese Module repräsentieren. Hier sind die Schritte, die Sie befolgen sollten, um Webpack mit React zu verwenden:
1. Zunächst müssen Sie sicherstellen, dass Sie Node.js und npm auf Ihrem Computer installiert haben. Sie können Node.js und npm von der offiziellen Webseite herunterladen.
2. Installieren Sie react und react-dom durch den Befehl `npm install react react-dom`.
3. Installieren Sie Webpack und Webpack CLI, indem Sie folgenden Befehl ausführen: `npm install webpack webpack-cli -D`.
4. Jetzt müssen Sie einen `webpack.config.js`-Datei in Ihrem Projekt-Root-Verzeichnis erstellen. Dies ist die Konfigurationsdatei für Webpack, die festlegt, wie Ihre JavaScript-Anwendung gebündelt wird.
Hier ist ein Beispiel für eine minimale `webpack.config.js`-Datei:
```javascript
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: “babel-loader“
}
}
]
}
};
```
5. Für das Transpilieren von JSX in JavaScript muss Babel verwendet werden. Installieren Sie Babel-Loader und babel/preset-env und babel/preset-react durch den Befehl `npm install babel-loader babel/core babel/preset-env @babel/preset-react -D`.
6. Erstellen Sie eine `.babelrc`-Datei in Ihrem Projekt-Root-Verzeichnis mit folgendem Inhalt:
```json
{
“presets”: [“@babel/preset-env”, “@babel/preset-react”]
}
```
7. Installieren Sie jetzt die HTML-Webpack-Plugin durch den Befehl `npm install html-webpack-plugin -D`. Sie erzeugt eine HTML-Datei, die alle Ihre Webpack-Bundles im Body-Tag enthält.
8. Ändern Sie Ihre `webpack.config.js`-Datei, um das HTML-Webpack-Plugin zu verwenden:
```javascript
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: “babel-loader“
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: “./src/index.html“
})
]
};
```
9. Jetzt müssen Sie nur noch ein NPM-Skript hinzufügen, um Webpack auszuführen. Fügen Sie dazu eine “build”-Eigenschaft zu den “scripts”-Eigenschaften in Ihrer `package.json`-Datei hinzu:
```json
“scripts”: {
“build”: “webpack —mode production“
}
```
10. Sie können nun Ihre React-Anwendung bundeln, indem Sie den folgenden Befehl ausführen: `npm run build`.
Hinweis: Dies ist eine grundlegende Einführung in die Nutzung von Webpack mit React. Je nach Anforderungen Ihrer Anwendung müssen Sie möglicherweise weitere Konfigurationen und Optimierungen vornehmen.
