programovani:webpack

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Následující verze 		Předchozí verze
programovani:webpack [2019/06/25 01:02]
badtotem vytvořeno 		programovani:webpack [2019/06/25 01:11] (aktuální)
badtotem [Step 5: Run The App]
Řádek 3: Řádek 3:
 In this tutorial, you will learn how to setup Webpack with Babel and React support. We’ll also configure a dev server. 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 +====== ​Step 1: Initialize Project ​======
-Create new folder webpack-react and open it:+
  
 +Create new folder webpack-react and open it:
 +<​code>​
 mkdir webpack-react && cd $_ mkdir webpack-react && cd $_
 +</​code>​
 +
 $_ is a reference to the last argument to the previous command. $_ is a reference to the last argument to the previous command.
  
 Initialize a new npm project: Initialize a new npm project:
  
 +<​code>​
 npm init -y npm init -y
 +</​code>​
 +
 This command will create package.json file in your directory. We pass the  y option to skip the questions. 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: Create file src/​index.html with following contents:
 +<​code>​
 <​!DOCTYPE html> <​!DOCTYPE html>
 <html lang="​en">​ <html lang="​en">​
Řádek 28: Řádek 34:
 </​body>​ </​body>​
 </​html>​ </​html>​
-Step 2: Set Up Webpack+</​code>​ 
 + 
 +====== ​Step 2: Set Up Webpack ​====== 
 Install webpack, webpack-cli,​ webpack-dev-server, ​ html-webpack-plugin and html-loader as dev dependencies:​ 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 npm i webpack webpack-dev-server html-webpack-plugin --save-dev
 +</​code>​
 +
 Here’s why they are needed: Here’s why they are needed:
  
-webpack ​is core dependency +  * Nečíslovaný seznamwebpack ​is core dependency 
-webpack-dev-server will allow us to run dev server +  ​* ​webpack-dev-server will allow us to run dev server 
-html-webpack-plugin simplifies working with html files+  ​* ​html-webpack-plugin simplifies working with html files 
 Create webpack.config.js with following content: Create webpack.config.js with following content:
  
 +<​code>​
 const HtmlWebPackPlugin = require("​html-webpack-plugin"​);​ const HtmlWebPackPlugin = require("​html-webpack-plugin"​);​
 const path = require('​path'​);​ const path = require('​path'​);​
Řádek 50: Řádek 64:
 plugins: [new HtmlWebPackPlugin({ template: "​./​src/​index.html"​ })] plugins: [new HtmlWebPackPlugin({ template: "​./​src/​index.html"​ })]
 }; };
 +</​code>​
 +
 Add build and start commands to scripts section of package.json:​ Add build and start commands to scripts section of package.json:​
  
 +<​code>​
 "​scripts":​ { "​scripts":​ {
 "​build":​ "​webpack --mode production",​ "​build":​ "​webpack --mode production",​
 "​start":​ "​webpack-dev-server --open --mode development",​ "​start":​ "​webpack-dev-server --open --mode development",​
 } }
-Step 3: Set Up Babel+</​code>​ 
 + 
 +====== ​Step 3: Set Up Babel ====== 
 Install Babel dependencies:​ Install Babel dependencies:​
  
 +<​code>​
 npm i @babel/core babel-loader @babel/​preset-env @babel/​preset-react --save-dev npm i @babel/core babel-loader @babel/​preset-env @babel/​preset-react --save-dev
 +</​code>​
 +
 We’ve installed babel and two presets here: We’ve installed babel and two presets here:
  
Řádek 66: Řádek 89:
 Create .babelrc with following contents: Create .babelrc with following contents:
  
 +<​code>​
 { {
 "​presets":​ ["​@babel/​preset-env",​ "​@babel/​preset-react"​] "​presets":​ ["​@babel/​preset-env",​ "​@babel/​preset-react"​]
 } }
 +</​code>​
 +
 Add babel-loader to your webpack configuration:​ Add babel-loader to your webpack configuration:​
  
 +<​code>​
 const HtmlWebPackPlugin = require("​html-webpack-plugin"​);​ const HtmlWebPackPlugin = require("​html-webpack-plugin"​);​
 const path = require('​path'​);​ const path = require('​path'​);​
Řádek 93: Řádek 120:
 plugins: [new HtmlWebPackPlugin({ template: "​./​src/​index.html"​ })] plugins: [new HtmlWebPackPlugin({ template: "​./​src/​index.html"​ })]
 }; };
-Step 4: Set Up React+</​code>​ 
 + 
 +====== ​Step 4: Set Up React ====== 
 Install React dependencies:​ Install React dependencies:​
  
 +<​code>​
 npm i react react-dom npm i react react-dom
 +</​code>​
 +
 react - provides us with API to work with components react - provides us with API to work with components
 react-dom - allows to render to HTML DOM react-dom - allows to render to HTML DOM
 +
 Create file src/App.js with following code: Create file src/App.js with following code:
  
 +<​code>​
 import React from "​react"​ import React from "​react"​
 import ReactDOM from "​react-dom"​ import ReactDOM from "​react-dom"​
Řádek 112: Řádek 147:
  
 ReactDOM.render(<​App />, document.getElementById("​root"​)) ReactDOM.render(<​App />, document.getElementById("​root"​))
-Step 5: Run The App+</​code>​ 
 + 
 +====== ​Step 5: Run The App ====== 
 Start webpack-dev-server by running npm start: Start webpack-dev-server by running npm start:
  
 +<​code>​
 npm start npm start
 +</​code>​
 +
 It should open a browser window and you should see this: It should open a browser window and you should see this:
 +
 +{{:​programovani:​hello-app.png?​400|}}
  • programovani/webpack.1561417363.txt.gz
  • Poslední úprava: 2019/06/25 01:02
  • autor: badtotem