ホームページ > 記事 > ウェブフロントエンド > React の開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (構成例付き)
この記事では主にReact+webpackの開発環境構築手順について詳しく紹介します。興味のある学生は、react についての知識を互いに話し合うことができます。この記事を一緒に読んでみましょう
ここでは、最初に各ステップの方法と理由を詳しく説明します。後で他の記事で Webpack をすばやく構築する方法について説明します。
ディレクトリ:
1. 環境要件
2. NODE_PATH の構成
4. webpack グローバル パッケージのインストール
6.webpack.config.js の構成
2 番目のアップグレード
1. HTML を自動生成するプラグインの紹介
2. webpack-dev-server
3. CSS ファイル除去プラグイン
5. Win10 システムを使用します。以下で説明する手順は、Windows システムでのみ試行されます。
まず、Webpack を設定します。設定手順は次のとおりです:
1. 基本:
1. 環境要件: nodejs + コンピューター ネットワークがインストールされている
C:UsersXXXAppDataRoamingnpm が表示されます。次に、[マイ コンピュータ] -> [プロパティ] を右クリック -> [システムの詳細設定] -> [詳細設定] -> [環境変数] -> [以下のシステム変数] に移動します。 ->新規->次に、変数名: NODE_PATH、値: C:UsersXXXAppDataRoamingnpmnode_modules を入力します。 設定後、「OK」「OK」をクリックします。 3. プロジェクト フォルダーを作成し (ファイル名を変更します)、プロジェクト フォルダーの下で Shift キーを押しながら右クリックします。ここで Powershell ウィンドウを開くオプションを選択します (中国語システム: ここでコマンド ウィンドウを開きます)。ポップアップ ウィンドウの
側に「node -v」と入力すると、システムはノードのバージョン番号を返します。注: 以下のすべての PowerShell ウィンドウは、プロジェクト フォルダーのルート ディレクトリで開かれます。
4. グローバル Webpack パッケージをインストールします。コマンド: npm install webpack -g を押して Enter を押します
システムが自動的にインストールします。インストール後、webpack -v と入力して、現在のバージョンはバージョン 3.3.0
5 です。 package.json ドキュメントを作成します。
Powershell で「npm init」と入力し、Enter キーを押すと、関連するコンテンツの入力を求めるプロンプトが表示されます。設定したくない場合は、Enter キーを押してスキップしてください。
下面是系统相关的提示: 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+回车键
プロジェクトのルート ディレクトリに webpack.config.js ファイルを作成します。同時に、ソースファイルを保存するための src フォルダーを作成します。
以下はプロジェクト全体のフォルダー構造です:
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 設定内容と手順:
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'),//} */ }srcフォルダーの下に新しいapp.jsを作成します
var app=document.createElement("p"); app.innerHTML='<h1> Hello World!</h1>';document.body.appendChild(app);srcの下にindex.htmlを作成しバンドルを導入します.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>
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]src配下のindex.htmlをブラウザで開きます。
Hello World!が表示されます。これで、最も単純な Webpack パッケージ構成が確立されました。
2 番目、アップグレード
HTML を自動的に生成するプラグインを紹介します
PowerShell ウィンドウの下に次のコマンドを入力します:npm install html-webpack-plugin --save-dev
–save-dev: json ファイルの開発モードで依存関係 (devDependency) を自動的に書き込みます。
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: 允许跳过模型块,比如单元测试块 */ }) ], }
PowerShell ウィンドウで webpack を実行します。成功すると、出力で設定されたパス (ここにビルド フォルダーがあります) の下に、index.html が生成されます。生成された js は自動的にbundle.jsをインポートするため、テンプレートindex.htmlにbundle.jsを追加する必要はありません。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manual
のコラムにアクセスして学習してください)
webpack-dev-server
上記をデバッグするには、まず webpack コマンドを実行し、ブラウザで開き、変更された結果を確認します。この作業を簡素化するにはどうすればよいでしょうか? Webpack は、node.js Express サーバーを導入し、ホット アップデートをサポートし、変更して保存するたびにブラウザーのコンテンツを自動的に更新します。
webpack-dev-server のインストール手順 (開発を支援するために使用されるため、開発モードの依存関係を記述します):npm install webpack-dev-server --save-dev
在package.json文件里面配置,快捷指令。 “scripts":{ "start":"webpack-dev-server --inline --hot" } 指令的意思:在PoweShell窗口下敲npm start 等效于npm webpack-dev-server -- inline --hot
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/
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使用手册栏目中学习),有问题的可以在下方留言提问。
以上がReact の開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (構成例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。