Wie konfiguriere ich die Entwicklungsumgebung für React? Konfigurationsschritte für die React+Webpack-Entwicklungsumgebung (mit Konfigurationsbeispielen)

Dieser Artikel führt Sie hauptsächlich in die Details der Konfigurationsschritte der React+Webpack-Entwicklungsumgebung ein. Interessierte Schüler können ihr Wissen über das Reagieren miteinander besprechen. Lassen Sie uns nun gemeinsam diesen Artikel lesen.

Hier werden wir zunächst die Methoden und Gründe für jeden Schritt aufschlüsseln, und in anderen Artikeln wird erklärt, wie es geht. Erstellen Sie schnell ein Webpack.

Verzeichnis:
1 Grundlagen
2. Konfiguration von NODE_PATH
3. Projektordner erstellen
5. Paket.json-Dokument erstellen
6. webpack.config.js-Konfiguration
Zweites Upgrade
1. Ein Plug-in einführen, das automatisch HTML generiert
2. webpack-dev-server
3. CSS-Dateiunterstützung
4. CSS-Datei-Stripping-Plugin
5. Andere CSS-Hilfsmodule

Ich verwende das Win10-System und die unten genannten Schritte werden nur mit dem Windows-System ausprobiert.

Zuerst konfigurieren Sie das Webpack:

1. Umgebungsanforderungen: nodejs wurde installiert + Computernetzwerk

2. Konfiguration von NODE_PATH: cmd ruft das Eingabeaufforderungsfenster auf und gibt dann „Pfad“ ein: „C:UsersXXXAppDataRoamingnpm“ und klicken Sie dann mit der rechten Maustaste auf „Eigenschaften“. >Erweiterte Systemeinstellungen->Erweitert->Umgebungsvariablen->Unter Systemvariablen->Neu->Geben Sie dann den Variablennamen ein: NODE_PATH, Wert: C:UsersXXXAppDataRoamingnpmnode_modules. Klicken Sie nach der Einstellung auf OK, OK, OK.

3. Erstellen Sie einen Projektordner (und ändern Sie den Dateinamen) und drücken Sie Umschalt+Rechtsklick unter dem Projektordner. Wählen Sie hier die Option zum Öffnen eines Powershell-Fensters (chinesisches System: Öffnen Sie hier ein Befehlsfenster). Geben Sie im Popup-Fenster

node -v ein und das System gibt die Versionsnummer des Knotens zurück.

Hinweis: Alle unten aufgeführten PowerShell-Fenster werden im Stammverzeichnis des Projektordners geöffnet.

4. Installieren Sie das globale Webpack-Paket, Befehl: npm install webpack -g und drücken Sie die Eingabetaste

Das System installiert es automatisch. Geben Sie webpack -v ein, um die Versionsnummer von webpack anzuzeigen.

5. Erstellen Sie ein package.json-Dokument Geben Sie unter Powershell Folgendes ein: npm init und drücken Sie die Eingabetaste. Anschließend werden Sie vom System aufgefordert, relevante Inhalte einzugeben. Wenn Sie es nicht konfigurieren möchten, drücken Sie einfach die Eingabetaste, um es zu überspringen.

下面是系统相关的提示：
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 webpack.config .js-Konfigurationsdatei

Erstellen Sie eine webpack.config.js-Datei im Stammverzeichnis des Projekts. Erstellen Sie gleichzeitig einen src-Ordner zum Speichern der Quelldateien.

Das Folgende ist die Gesamtordnerstruktur des Projekts:

   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 Konfigurationsinhalt und Beschreibung:

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'),//}
*/
}

Erstellen Sie im Ordner src eine neue app.js

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

Erstellen Sie index.html unter src und führen Sie die Datei bundle.js ein

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

Installieren Sie das lokale Webpack-Paket und geben Sie den folgenden Befehl in PowerShell ein: npm install webpack –save-dev

Nach der Installation , Geben Sie direkt webpack ein. Bei Erfolg wird der folgende Inhalt angezeigt und bundle.js

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]

wird im Build-Ordner generiert. Öffnen Sie ihn mit einem Browser und index.html unter src. Es wird

Hello World!

angezeigt. Dies ist die einfachste Webpack-Verpackungskonfiguration.

2. Upgrade

Einführung eines Plug-Ins, das automatisch HTML generiert

Geben Sie den Befehl unter dem PowerShell-Fenster ein:

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

1. Kleiner Hinweis: Die Code-Ausführungsumgebung ist in Entwicklungsmodus und Produktionsmodus unterteilt. Einige Plug-Ins werden nur während der Entwicklung verwendet.

   ​ ​ ​ ​ –save: Abhängigkeiten im Produktionsmodus automatisch in JSON-Dateien schreiben.
   ​​​​​ – save-dev: Die Abhängigkeiten (devDependencies) im Entwicklungsmodus automatisch in die JSON-Datei schreiben.

Nachdem das Plug-in installiert ist, konfigurieren Sie die Datei webpack.config.js. Importieren Sie das Modul und legen Sie den Plugin-Objektwert in module.exports fest.

 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: 允许跳过模型块，比如单元测试块
  */
})
],
}

Webpack im PowerShell-Fenster ausführen. Nach Erfolg wird index.html unter dem durch die Ausgabe festgelegten Pfad generiert (hier ist der Build-Ordner). Die generierten JS importieren automatisch bundle.js, sodass die Vorlage index.html bundle.js nicht hinzufügen muss. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte
React Reference Manual
der chinesischen PHP-Website, um mehr zu erfahren)

webpack-dev-server

Für das obige Debuggen müssen Sie zuerst den Webpack-Befehl ausführen und ihn dann mit einem Browser öffnen, um die geänderten Ergebnisse anzuzeigen. Wie kann diese Arbeit vereinfacht werden? Webpack kann den Express-Server node.js einführen, Hot-Updates unterstützen und den Browserinhalt nach jeder Änderung und Speicherung automatisch aktualisieren.

Anweisungen zum Installieren des Webpack-Dev-Servers (wird zur Unterstützung der Entwicklung verwendet, schreiben Sie also Abhängigkeiten vom Entwicklungsmodus):

1. npm install webpack-dev-server --save-dev

   Der automatische Aktualisierungsmodus des Servers ist in Iframe- und Inline-Modus unterteilt über den Inline-Modus.

Es gibt zwei Möglichkeiten, die Serverkonfiguration von Webpack zu konfigurieren:

1. Konfigurieren Sie direkt im Dokument webpack.config.js.

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

Konfiguration in 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使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWie konfiguriere ich die Entwicklungsumgebung für React? Konfigurationsschritte für die React+Webpack-Entwicklungsumgebung (mit Konfigurationsbeispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!