Comment créer un environnement de développement webpack+react

Cette fois, je vais vous montrer comment créer un environnement de développement webpack+react et quelles sont les précautions pour créer un environnement de développement webpack+react. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'environnement dépend principalement de la version

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

Installation et configuration du webpack

1 Mise en route

Créer un nouveau répertoire de projet, initialiser npm, et créez un nouveau répertoire source de développement

mkdir webpack-react && cd webpack-react
npm init -y
mkdir src

2. webpack-cli

À partir de la version 4.x, webpack et webpack-cli doivent être installés en même temps (cet outil est utilisé pour exécuter webpack dans la ligne de commande).

npm install webpack webpack-cli --save-dev

3.wepbackFichier de configuration

Créez un nouveau fichier webpack.config.js dans le répertoire racine du projet. Ce fichier est le fichier principal pour exécuter webpack. .

Configuration de base 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')  // 打包后自动输出目录
  }
}

Configuration des scripts du fichier package.json

"scripts": {
  "build": "webpack"
}

À ce stade, exécutez npm run build sur la ligne de commande pour exécuter Si webpack est installé, webpack trouvera automatiquement le fichier webpack.config.js dans le répertoire racine du projet et effectuera le packaging.

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

configuration liée au module webpack.config.js

webpack considère tous les fichiers comme des modules, les images, les fichiers CSS, les polices et autres ressources statiques seront regroupés dans js, le fichier de chargement sera donc nécessaire. Plus de chargeurs peuvent interroger l'URL. Ensuite, nous installons certains fichiers de chargement nécessaires.

npm install style-loader css-loader url-loader --save-dev

Ajoutez le module module à webpack.config.js

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']
  }
 ]
 }
}

Après avoir introduit le chargeur, vous pouvez importer le fichier css ou d'autres fichiers que vous souhaitez importer dans votre src/ Fichier index.js Ressources statiques.

cd src && touch main.css

Le fichier src/index.js introduit le CSS

import "./main.css";

configuration des plugins webpack.config.js

Fichier js principal et après les fichiers statiques peuvent être regroupés avec succès dans un fichier js, nous devons mettre le fichier js dans le fichier html. Le plug-in webpack ***html-webpack-plugin*** fait cela, il peut générer automatiquement un fichier html. et mettez nos fichiers js packagés en HTML.

npm install html-webpack-plugin --save-dev

plugins de configuration webpack.config.js

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
 ]
};

Après avoir exécuté npm run build, nous pouvons voir qu'il y a un fichier index.html supplémentaire dans le répertoire dist.

<!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>

À ce stade, les exigences les plus simples et les plus élémentaires du webpack ont ​​été configurées. À l'heure actuelle, la structure du projet est :

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

Configuration du webpack React

Installer React

npm install react react-dom --save

Installer React, dépendance de conversion Wepback

Les composants React sont composés de JSX. Les navigateurs ne peuvent pas reconnaître JSX et doivent être convertis par Babel.

1. babel-croe est le fichier principal de Babel

2. babel-preset-env pour échapper à ES6 vers ES5

3. babel-preset-react Convertir JSX en js

4. Conversion babel de babel-loader webpack

Copier le code Le code est le suivant :

npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev

fichier de configuration .babelrc

Créez un nouveau fichier .babelrc dans le répertoire racine du projet. Ce fichier est la configuration de base de Babel qui le reconnaîtra automatiquement dans le répertoire racine du projet.

// .babelrc
{
 "presets": ["env", "react"]
}

Configuration du webpack babel-loader

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

Configuration du modèle html-webpack-plugin

Nous savons que React doit obtenir un racine de l'élément de page, puis le rendu prendra effet. Nous pouvons créer un nouveau fichier html et laisser le package de plug-in html-webpack-plugin basé sur ce fichier.

Nous créons donc un nouveau fichier html dans le répertoire racine et utilisons ce fichier comme modèle.

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

À ce stade, configuration de webpack.config.js :

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'  // 模板文件位置
 }) 
 ]
};

Écrivez React et exécutez webpack

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

运行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

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
 },
};

运行webpack-dev-server

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

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --open --mode development" // webpack-dev-server
},

命令行运行 npm run dev

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

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

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

推荐阅读：

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!