Heim > Web-Frontend > js-Tutorial > Hauptteil

So erstellen Sie eine Webpack+React-Entwicklungsumgebung

php中世界最好的语言
Freigeben: 2018-05-28 15:41:18
Original
1565 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie eine Webpack+React-Entwicklungsumgebung erstellen und welche Vorsichtsmaßnahmen für den Aufbau einer Webpack+React-Entwicklungsumgebung gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die Umgebung hängt hauptsächlich von der Version ab

  1. webpack@4.8.1

  2. webpack-cli @2.1 .3

  3. webpack-dev-server@3.1.4

  4. react@16.3.2

  5. babel-core@6.26.3

  6. babel-preset-env@1.6.1

  7. bable-preset-react@ 6.24. 1

Webpack-Installation und -Konfiguration

1. Erstellen Sie ein neues Projektverzeichnis, initialisieren Sie npm, und erstellen Sie ein neues Entwicklungsquellverzeichnis

mkdir webpack-react && cd webpack-react
npm init -y
mkdir src
Nach dem Login kopieren

2. webpack-cli

Ab Version 4.x müssen Webpack und Webpack-cli gleichzeitig installiert werden (dieses Tool wird verwendet). um Webpack in der Befehlszeile auszuführen).

npm install webpack webpack-cli --save-dev
Nach dem Login kopieren

3.wepback

Konfigurationsdatei

Erstellen Sie eine neue webpack.config.js-Datei im Projektstammverzeichnis. Diese Datei ist die Kerndatei zum Ausführen von Webpack.

Grundkonfiguration von webpack.config.js

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',              // 入口文件
  output: {                       // webpack打包后出口文件
    filename: 'app.js',               // 打包后js文件名称
    path: path.resolve(dirname, 'dist')  // 打包后自动输出目录
  }
}
Nach dem Login kopieren

Konfiguration der Dateiskripte package.json

"scripts": {
  "build": "webpack"
}
Nach dem Login kopieren

Führen Sie zu diesem Zeitpunkt npm run build in der Befehlszeile aus, um Webpack und Webpack auszuführen Es findet automatisch die Datei webpack.config.js im Stammverzeichnis des Projekts und führt die Paketierung durch.

npm run build
// webpack打包后的项目
├── dist
│  └── app.js       // 打包后的app.js
├── package.json
├── src
│  └── index.js      // 源目录入口文件
└── webpack.config.js
Nach dem Login kopieren

webpack.config.js-modulbezogene Konfiguration

Webpack betrachtet alle Dateien als Module, Bilder, CSS-Dateien, Schriftarten und andere statische Ressourcen werden in JS-Dateien gepackt Daher wird die Loader-Datei benötigt, um die URL abzufragen.

npm install style-loader css-loader url-loader --save-dev
Nach dem Login kopieren

Modulmodul zu webpack.config.js hinzufügen

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 }
}
Nach dem Login kopieren

Nachdem Sie den Loader eingeführt haben, können Sie die CSS-Datei oder andere statische Ressourcen, die Sie importieren möchten, in Ihre src/index.js importieren Datei.

cd src && touch main.css
Nach dem Login kopieren

src/index.js-Datei führt CSS ein

import "./main.css";
Nach dem Login kopieren

Webpack.config.js-Plugin-Konfiguration

Haupt-JS-Dateien und statische Dateien können danach sein Um es erfolgreich in eine JS-Datei zu packen, müssen wir die JS-Datei in eine HTML-Datei einfügen. Das Webpack-Plugin ***html-webpack-plugin*** kann automatisch eine HTML-Datei generieren und uns zur Verfügung stellen die gepackten js-Dateien in HTML.

npm install html-webpack-plugin --save-dev
Nach dem Login kopieren

webpack.config.js konfiguriert Plugins

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
 ]
};
Nach dem Login kopieren

Nachdem wir npm run build ausgeführt haben, können wir sehen, dass sich im dist-Verzeichnis eine zusätzliche index.html-Datei befindet.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>name</title>
 </head>
 <body>
 // 打包后的app.js已经被自动插入了html文件
 <script type="text/javascript" src="app.js"></script></body>
</html>
Nach dem Login kopieren

Zu diesem Zeitpunkt wurden die einfachsten und grundlegendsten Anforderungen des Webpacks konfiguriert. Zu diesem Zeitpunkt lautet die Projektstruktur:

├── dist            // 生产目录
│  ├── app.js
│  └── index.html
├── package.json
├── src            // 源目录
│  ├── index.js
│  └── main.css
└── webpack.config.js
Nach dem Login kopieren

Reacts Webpack-Konfiguration

React installieren

npm install react react-dom --save
Nach dem Login kopieren

React installieren, Wepback-Konvertierungsabhängigkeit

React-Komponenten bestehen aus JSX. Browser können JSX nicht erkennen und müssen von Babel konvertiert werden.

    babel-croe ist die Babel-Kerndatei
  1. babel-preset-env zum Escape von ES6 auf ES5
  2. babel-preset-react JSX in js konvertieren
  3. Babe-Konvertierung des Babel-Loader-Webpacks
Code kopieren

Der Code lautet wie folgt: npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev

.babelrc-Konfigurationsdatei

Erstellen Sie eine neue .babelrc-Datei im Projektstammverzeichnis. Diese Datei ist die Kernkonfiguration von Babel und wird automatisch im Projektstammverzeichnis erkannt.

// .babelrc
{
 "presets": ["env", "react"]
}
Nach dem Login kopieren

Webpack Babel-Loader-Konfiguration

// 在webpack.config.js 的modules.rules中加入此配置
{
 test: /\.(js|jsx)$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader'
 }
}
Nach dem Login kopieren

HTML-Webpack-Plugin-Vorlagenkonfiguration

Wir wissen, dass React ein Root-Element des erhalten muss Seite und dann rendern Es wird wirksam. Wir können eine neue HTML-Datei erstellen und das HTML-Webpack-Plugin-Plugin-Paket basierend auf dieser Datei erstellen.

Also erstellen wir eine neue HTML-Datei im Stammverzeichnis und verwenden diese Datei als Vorlage.

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
    // react需要的渲染根元素
 <p id="root"></p>
</body>
</html>
Nach dem Login kopieren

Zu diesem Zeitpunkt webpack.config.js Konfiguration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  // 模板文件位置
 }) 
 ]
};
Nach dem Login kopieren

React schreiben und Webpack ausführen

// src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import './main.css'
ReactDom.render(
 <h1>hello world</h1>,
 document.getElementById('root')
);
Nach dem Login kopieren

运行npm run build,生成dist目录,打开dist目录中的index.html文件,可以发现浏览器已正常渲染"hello world"。

dev环境热更新配置

react的wepack完成以后,是不是发现每修改一次代码,想看到效果,得重新打包一次才行。webpack-dev-server配置可以帮助我们实现热更新,在开发环境解放我们的生产力。

安装webpack-dev-server

npm install webpack-dev-server --save-dev
Nach dem Login kopieren

webpack.config.js 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  
 }),
 // hot 检测文件改动替换plugin
 new webpack.NamedModulesPlugin(),   
 new webpack.HotModuleReplacementPlugin() 
 ],
    // webpack-dev-server 配置
 devServer: {
 contentBase: './dist',
 hot: true
 },
};
Nach dem Login kopieren

运行webpack-dev-server

在 package.json 文件 加入 scripts 配置:

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --open --mode development" // webpack-dev-server
},
Nach dem Login kopieren

命令行运行 npm run dev

可以在浏览器中输入localhost:8080 内容即为dist目录下的index.html内容。修改src/index.js中的内容或者依赖,即实时在浏览器热更新看到。

至此,react的webpack的基础开发环境已全部配置完毕。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用JS实现调用本地摄像头

怎样使用JS实现3des+base64加密解密算法

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Webpack+React-Entwicklungsumgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage