Comment configurer l’environnement de développement pour React ? Étapes de configuration de l'environnement de développement React+webpack (avec exemples de configuration)

Cet article vous présente principalement les détails des étapes de configuration de l'environnement de développement React+webpack. Les étudiants intéressés peuvent discuter entre eux de leurs connaissances sur la réaction. Lisons maintenant cet article ensemble

Ici, nous allons d'abord détailler les méthodes et les raisons de chaque étape, et d'autres articles expliqueront comment le faire. Créez rapidement un webpack.

Répertoire :
1 Bases
1. Exigences environnementales
2 Configuration de NODE_PATH
3 Créer un dossier de projet
4 Installer le package global webpack
5. Créer un document package.json
6. Configuration webpack.config.js
Deuxième mise à niveau
1. Introduire un plug-in qui génère automatiquement du HTML
2. webpack-dev-server
3. Prise en charge des fichiers CSS
4. Plug-in de suppression de fichiers CSS
5. Autres modules auxiliaires CSS

J'utilise le système win10 et les étapes mentionnées ci-dessous ne sont essayées qu'avec le système Windows.
Configurez d'abord le webpack. Voici les étapes de configuration :

1 Bases  :

Exigences environnementales : nodejs a été installé + réseau informatique

2. Configuration de NODE_PATH : cmd ouvre la fenêtre d'invite de commande, puis tape le chemin. Parmi les résultats, il y aura

C:UsersXXXAppDataRoamingnpm; >Paramètres système avancés->Avancé->Variables d'environnement->Sous variables système->Nouveau-> Tapez ensuite le nom de la variable : NODE_PATH, valeur : C:UsersXXXAppDataRoamingnpmnode_modules. Après le réglage, cliquez sur OK OK OK.

3. Créez un dossier de projet (et modifiez le nom du fichier) et appuyez sur Maj+clic droit sous le dossier du projet. Sélectionnez l'option Ouvrir une fenêtre Powershell ici (système chinois : ouvrez une fenêtre de commande ici). Dans la fenêtre contextuelle

, entrez node -v et le système renverra le numéro de version du nœud.
Remarque : toutes les fenêtres PowerShell ci-dessous sont ouvertes dans le répertoire racine du dossier du projet.

4. Installez le package webpack global, commande : npm install webpack -g et appuyez sur Entrée

Le système l'installera automatiquement. Une fois installé, tapez webpack -v pour voir le numéro de version de webpack. Ma version actuelle est la version 3.3.0

Créez un document package.json

. Sous Powershell, tapez : npm init et appuyez sur Entrée, puis le système vous demandera de saisir le contenu pertinent. Si vous ne souhaitez pas le configurer, appuyez simplement sur Entrée pour l'ignorer.

下面是系统相关的提示：
name：reactwebpack +回车键 ，reactwebpack是我这个项目的名字
version：1.0.0+回车键description:（项目描述信息），这里按回车键直接跳过
entry point:(入口文件)按回车键跳过。入口文件会在下面讲的webpack.config.js 里面陪置
test command: 跳过就好，会面会重新配置这个指令内容。这里先跳过
git repository:(git 库的链接地址)。这里不涉及到git库，直接跳过keywords:（关键字），直接跳过先
author：（作者），可以输入自己的英文名+回车键license:(ISC 开源许可证号，与git相关) 这里跳过
Is this ok？（yes） 比对下内容，如果没错，直接输入y+回车键

6 Fichier de configuration webpack.config .js

Créez un fichier webpack.config.js dans le répertoire racine du projet. En même temps, créez un dossier src pour stocker les fichiers sources.

Voici la structure globale des dossiers du projet :

   reactwebpack        #项目文件夹
         build         #正式打包用的文件夹（也有人用dist命名），用于生产环境
         node_modules  #npm 指令会自动生成
         src           #用于存放源文件
          app.js       #在src下面建一个app.js
          index.html   #在src下面建一个index.html
        package.json       #webpack 包的项目文件
        webpack.config.js   #webpack包的配置文件
        README.md           # 项目说明文档

webpack.config.js Contenu et description de la configuration :

var path=require('path');module.exports = {entry:'./src/app.js', //入口文件配置为app.js文件。若入口文件为index.js,这里可以直接写成'./src'//入口文件很多的话，可以写成下面的格式：
/*entry:{    pageOne: './src/pageOne/index.js',    pageTwo: './src/pageTwo/index.js',    pageThree: './src/pageThree/index.js'}
*/output: {    filename:'bundle.js',//js合并后的输出的文件，命名为bundle.js    path:path.resolve(__dirname,'build'),//指令的意思是：把合并的js文件，放到根目录build文件夹下面    //publicPath:'',生成文件的公共路径，‘/work/reactweb/dist’ 生产环境下所有的文件路径将会添加这个公共路径
}//多个入口的输出文件格式
/*output: {    filename:'[name].js',//name相当于变量，等同于pageOne/pageTwo/pageThree    path:path.resolve(__dirname,'build'),//}
*/
}

Créez un nouveau app.js sous le Dossier src

var app=document.createElement("p");
app.innerHTML=&#39;<h1> Hello World!</h1>&#39;;document.body.appendChild(app);

Créez index.html sous src et introduisez le fichier bundle.js

<!DOCTYPE html><html lang="en">
    <head>
        <title>reactwebpack</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="../build/bundle.js"></script>
    </body></html>

Installez le package local webpack et tapez la commande ci-dessous PowerShell : npm install webpack –save -dev

Après l'installation, tapez directement webpack. En cas de succès, le contenu suivant sera affiché et bundle.js sera généré sous le dossier build

Hash: bba9fbe70c8f6bbe2cd1Version: webpack 3.3.0Time: 47ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.58 kB       0  [emitted]  main
   [0] ./src/app.js 111 bytes {0} [built]

Ouvrez-le avec un navigateur, index. html sous src . Il affichera

Hello World!

Il s'agit de la configuration d'emballage Webpack la plus simple.

2. Mise à niveau

1. Présentation d'un plug-in qui génère automatiquement du HTML

   Tapez la commande sous la fenêtre PowerShell :
   

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

Petite remarque : l'environnement d'exécution du code est divisé en mode développement et mode production. Certains plug-ins ne sont utilisés que pendant le développement.

​ ​ ​ ​ –save : Écrivez automatiquement les dépendances en mode production dans les fichiers json.
​​​​​—save-dev : écrivez automatiquement les dépendances (devDependencies) en mode développement dans le fichier json.

Une fois le plug-in installé, configurez le fichier webpack.config.js. Importez le module et définissez la valeur de l'objet plugins dans module.exports.

 var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = {
...//前面的对象后面需要添加逗号隔开plugins:[new HtmlwebpackPlugin({    title:'reactwebpack'
   /* 全部都是可选项    title:"reactwebpack",   配置html 的title    filename: , html文件的名字，默认是index    template:'', 模板文件路径    inject:true|'body'|'head'|'false', 设置为 true|'body':js文件引入的位置为body的结束标签之前    favicon:'',  设置html的icon图标    minify:{}|false, 暂时不理解这个参数的使用    hash:true|false,  将添加唯一的webpack编译hash到所有包含的脚本和css文件    cache:true|false, 默认为true，仅仅在文件修改之后才会发布    showErrors:true|false, 默认为true，错误信息写入HTML页面中    chunks: 允许添加某些块（比如unit test）    chunksSortMode: 允许控制块在添加到页面之前的排序方式    excludeChunks: 允许跳过模型块，比如单元测试块
  */
})
],
}

Exécutez webpack dans la fenêtre PowerShell. Après succès, index.html sera généré sous le chemin défini par la sortie (voici le dossier de construction). Le js généré importera automatiquement bundle.js, donc le modèle index.html n'a pas besoin d'ajouter bundle.js. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois

Colonne React Reference Manual pour en savoir plus)

1. webpack-dev-server

Pour le débogage ci-dessus, vous devez d'abord exécuter la commande webpack, puis l'ouvrir avec un navigateur pour voir les résultats modifiés. Comment simplifier ce travail ? Webpack peut introduire le serveur express node.js, prendre en charge les mises à jour à chaud et actualiser automatiquement le contenu du navigateur après chaque modification et enregistrement.

Instructions pour l'installation de webpack-dev-server (utilisé pour aider au développement, donc écrivez les dépendances du mode de développement) :

npm install webpack-dev-server --save-dev

Le mode d'actualisation automatique du serveur est divisé en mode iframe et mode inline. parlez du mode en ligne ici.

Il existe deux manières de configurer la configuration du serveur de webpack :

1. Configurez directement dans le document webpack.config.js.

    在package.json文件里面配置，快捷指令。
    “scripts":{
     "start":"webpack-dev-server --inline --hot" 
}
 指令的意思：在PoweShell窗口下敲npm start 等效于npm webpack-dev-server -- inline --hot

Configuration dans webpack.config.js :

var webpack=require('webpack');//用于服务器的配置

module.exports ={...devServer:{
    //contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
   // contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
   // publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
    //compress:true,//gzip压缩
    //headers:{"X-Custom-Foo":"bar"},
    hot:true,//是否启用热更新
    port:8080,
    historyApiFallback:true,//html5接口,设置为true，所有路径均转到index.html
    inline:true,//是否实时刷新，即代码有更改，自动刷新浏览器 
    stats:{colors:true},//显示bundle文件信息，不同类型的信息用不同的颜色显示
    /*
    proxy:{     //服务器代理配置        "/api":{  //相对路径已/api打头，将会触发代理
            target:"http://localhost:3000", //代理地址
            pathRewrite:{"^/api":""}, //路径替换
            secure:false //跨域
        }
    }
    */
},...}

配置好后在PowerShell窗口敲npm start 启动服务器。
第一次尝试修改js时，如果浏览器的console控制台显示[HMR]Waitiing for update signal from WDS…,但此时网页内容没有刷新时。可以在PowerShell用ctrl+c来停止当前进程。页面就可以刷新过来。 连按两次ctrl+c，PowerShell 就会提示是否停止服务器，敲y回车就可以停掉服务器。
2. 重新建一个server.js ，专门用于服务器的配置。(推荐使用这种方式)
在根目录上创建一个server.js

  在package.json文件里面配置，快捷指令,指定对应的配置文件。  "scripts": {   "start":"node server.js" 
  },

server.js 的配置：var webpack = require('webpack');//引入webpack模块var webpackDevServer = require('webpack-dev-server');//引入服务器模块var config = require('./webpack.config');//引入webpack配置文件var server = new webpackDevServer(webpack(config),{    //contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
   // contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
   // publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
    //compress:true,//gzip压缩
    //headers:{"X-Custom-Foo":"bar"},
    hot:true,//是否启用热更新   
    historyApiFallback:true,//html5接口,设置为true，所有路径均转到index.html
    inline:true,//是否实时刷新，即代码有更改，自动刷新浏览器 
    stats:{colors:true},//显示bundle文件信息，不同类型的信息用不同的颜色显示
    /*
    proxy:{     //服务器代理配置
        "/api":{  //相对路径已/api打头，将会触发代理
            target:"http://localhost:3000", //代理地址
            pathRewrite:{"^/api":""}, //路径替换
            secure:false //跨域
        }
    }
    */});//将其他路由，全部返回index.htmlserver.app.get('*',function(req,res){
    res.sendFile(__dirname+'/build/index.html');
});
server.listen(8080,function(){
 console.log('正常打开8080端口')
});

若要启动node js api 的热更新功能，需要修改webpack.config.json 的entry的代码。
注意：在用webpack生成最终的build文件用于生产环境的时候，请先把热更新代码屏蔽掉，否则运行build里面的index.hmtl 时，会一直报错： GET http://localhost:8080/sockjs-node/info?t=1510883222453 net::ERR_CONNECTION_REFUSED    msgClose @ client:164 abstract-xhr.js:132。

module.exports = {
    entry: {
 app:[ 
              'webpack-dev-server/client?http://localhost:8080',  // 热更新监听此地址                                                     
               'webpack/hot/dev-server',  // 启用热更新
              path.resolve(__dirname, 'src', 'app')  
        ]        
    },...plugins:[...new webpack.HotModuleReplacementPlugin(),//热更新配套插件...]
}

3.CSS 文件的支持

在实现webpack的基本配置和服务器的热更新后，我们将会考虑网页的具体实现（html+CSS+JS）。webpack是基于nodeJS平台，完全支持JS文件不支持css。所以要把css转成JS文件。webpack提供了一个两个模块来支持css文件转编译。
style-loader:将css内容插入到html的style
css-loader:处理css里面的@import 和url() 的内容，需要url-loader 和file-loader的支撑
file-loader: 用MD5 hash加密文件名后返回相应的路径
url-loader 在file-loader 基础上加了额外的功能。当链接的文件小于limit 8192时，可以直接返回DataURL。DataURL是图片格式转换成base64编码的字符串，并存储在URL中。这样可以减少客户端的请求次数

引入这两个loader的方法:
先安装着两个模块,相关的指令(用于开发模式的依赖)：

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

修改webpack.config.js 的配置

module.exports ={...module:{
    rules:[{
        test:/\.css$/,
        use:['style-loader','css-loader'],

    },
    {   //配置辅助loader
        test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader:'url-loader',
        options:{limit:8091}
    }
]
},...resolve:{
    extensions:['.js','jsx','less','.css','.scss']//后缀名自动补全
}
}

在src文件夹下面创建两个文件夹：

src
    css
        css.css
    img        7.png

css.css 里面的代码：

p{    background:url('../img/7.png') no-repeat 211px 0px ;  

}

app.js 入口文件导入css文件

require('./css/css');

都配置好后
在PowerShell 下敲npm start 运行服务器，浏览器上输入http://localhost:8080/

1. CSS 文件剥离插件

css文件和html混合，这不符合html的优化思路。所以要求webpack生成的最终文件css也是单独一个文件。这里webpack提供了extract-text-webpack-plugin插件。
安装的指令：

npm install extract-text-webpack-plugin --save-dev

修改webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {...module:{
    rules:[{
        test:/\.css$/,
        use:ExtractTextPlugin.extract({    //使用ExtractTextPlugin 插件
            fallback:"style-loader",
            use:"css-loader"
        }),

    },{   //配置辅助loader
        test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader:'url-loader',
        options:{limit:8091}
    }

]
},...plugins:[...new ExtractTextplugin("styles.css"),    //插件声明
]，...}

停掉服务器，然后敲webpack 指令就会看到build文件下的styles.css 文件。
5.其他css辅助模块
 less 模块 sass模块 前缀postcss模块
安装指令：

npm install sass-loader node-sass webpack --save-dev
 npm install less-loader less --save-dev
 npm i -D postcss-loader

在src文件夹下创建两个文件夹（less,scss）及相应的文件：

less.less:
@color:#f938ab;p{    color:@color;
}

scss.scss:$font-stack:Helvetica,sans-serif;$primary-color:#333;
p{
    font:100% $font-stack;
    border:1px solid $primary-color;
}

在app.js 里面引用
在根目录上创建postcss.config.js（webpack 会自动找到这个文件):

module.exports = {    plugins:{ 
    'autoprefixer': {},   
    }
}

webpack.config.js 里面配置:

module.exports ={...module:{
    rules:[
        {
        test:/\.css$/,        
        use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
            fallback:"style-loader",//用于开发环境
            use:["css-loader","postcss-loader"]
        }),
    },{   //配置辅助loader
        test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader:'url-loader',
        options:{limit:8091}
    },
      {
        test:/\.less$/,        
        use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
            fallback:"style-loader",//用于开发环境
            use:["css-loader","postcss-loader","less-loader"]
        }),
    },
       {
        test:/\.scss$/,        
        use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
            fallback:"style-loader",//用于开发环境
            use:["css-loader","postcss-loader","sass-loader"]
        }),
    }
]
},...}

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

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!