programovani:webpack [BadTotem IT pomucky]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
Usually create-react-app is enough to create new React applications, and if you need to have some specific settings - you can always eject and alter its webpack configuration. But sometimes you just need to set up a project from scratch.

In this tutorial, you will learn how to setup Webpack with Babel and React support. We’ll also configure a dev server.

====== Step 1: Initialize Project ======

Create new folder webpack-react and open it:
<code>
mkdir webpack-react && cd $_
</code>

$_ is a reference to the last argument to the previous command.

Initialize a new npm project:

<code>
npm init -y
</code>

This command will create package.json file in your directory. We pass the  y option to skip the questions.

Create file src/index.html with following contents:
<code>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>How to set up React, Webpack, and Babel</title>
</head>
<body>
  <div id="root">
    <!-- Mounting point for your application -->
  </div>
</body>
</html>
</code>

====== Step 2: Set Up Webpack ======

Install webpack, webpack-cli, webpack-dev-server,  html-webpack-plugin and html-loader as dev dependencies:

<code>
npm i webpack webpack-dev-server html-webpack-plugin --save-dev
</code>

Here’s why they are needed:

  * Nečíslovaný seznamwebpack is core dependency
  * webpack-dev-server will allow us to run dev server
  * html-webpack-plugin simplifies working with html files

Create webpack.config.js with following content:

<code>
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
entry: "./src/App.js",
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
},
plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })]
};
</code>

Add build and start commands to scripts section of package.json:

<code>
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development",
}
</code>

====== Step 3: Set Up Babel ======

Install Babel dependencies:

<code>
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
</code>

We’ve installed babel and two presets here:

@babel/preset-react to compile JSX down to Javascript
@babel/preset-env to compile Javascript ES6 code down to ES5
Create .babelrc with following contents:

<code>
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
</code>

Add babel-loader to your webpack configuration:

<code>
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
entry: "./src/App.js",
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
},
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    }
  ]
},
plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })]
};
</code>

====== Step 4: Set Up React ======

Install React dependencies:

<code>
npm i react react-dom
</code>

react - provides us with API to work with components
react-dom - allows to render to HTML DOM

Create file src/App.js with following code:

<code>
import React from "react"
import ReactDOM from "react-dom"

const App = () => (
<>
  <h1>Hello React</h1>
  <p>Minimal React configuration.</p>
</>
)

ReactDOM.render(<App />, document.getElementById("root"))
</code>

====== Step 5: Run The App ======

Start webpack-dev-server by running npm start:

<code>
npm start
</code>

It should open a browser window and you should see this:

{{:programovani:hello-app.png?400|}}