webpack構築reactプロジェクトと処理コンポーネントの依存性

webpack構築reactプロジェクトと処理コンポーネントの依存性
webpackの紹介:  facebookのもう一つの神器です.reactと協力して開発するのは現在のweb先端の最も主流の技術です.誕生から現在の大型の単一ページアプリの開発を狙っています.管理モジュール依存性を実現できます.コード分割、資源圧縮3.公共モジュールを抽出する機能はまずnodejsの環境があります.1.npmでwebpackをインストールします. npm install webpack-g 2.新規プロジェクトディレクトリをcdでディレクトリに切り替えます.webpackをディレクトリにインストールします.npm install webpack--save-dev 4のインストールが成功したらdosでwebpackテストを入力します.モジュール開発と構築のためのツール1.問題はどう解決しますか? 2.依存するfileをどのように一つの中に統合しますか?3.どのように現在のディレクトリの下にreactとreact-domコンポーネントnpm install reactnpm install react-domを実装しますか?親コンポーネントに依存するサブコンポーネントを導入します.どうやって導入しますか?1.親コンポーネントの中で直接require('サブアセンブリのリソース位置')を通して2.サブコンポーネントの中でmodule.export=コンポーネント名(モジュール別名)つまりwebpackという構築ツールもseajsのようなモジュール化の枠組みであり、実際にはnodejsに依存して実現される問題ですか?このように依存したらブラウザで識別する方法がありますか?識別できない場合はどうやって操作しますか?npm install jsx-loader--save-devはjsx-loaderを通じて入口jsxを元の生jsに変換して、webpackを通じて元の生jsの依存を一つのファイルに統合して出力します.最後に出力を実行するファイルはブラウザでページを開くことができます.私達はgulpを使う時、gulpfileにタスクを配置するにはwebpackを使う必要がありますか?配置は必要ですか?1.プロジェクトのルートディレクトリの下にwebpack.co fig.js 2を新規作成します.jsでmodule.exports={}webpackの実行はすべてjbpackの構成に基づいていますので、以前定義したobjectの内部定義入り口、メインプログラムの入口(デフォルト起動入口)entry:'/jactComponent.jfix',4'の出力経路を定義します.ロードされたファイルのフォーマットを定義し、使用するコンパイラmodule:{loaders:}.   test:/\.jsx/   loader:'jsx-loader''6.すべてのokは後でdosの下でwebpackコマンドを入力すれば指定されたディレクトリの下でコンパイルされたファイルが表示されます.具体的な事例は以下の通りです.単一ページの開発が完了しました.
indexコード:

Mainコード:(すべてのheader、content、footerをindex)ページに する があります.

var React = require("react")
var ReactDOM=require("react-dom")
var Header= require("./header.js")
var Content =require("./content.js")
var Footer=require("./footer.js")
var Main = React.createClass({
	render:function(){
		return(
			

				

					

				
				

					
				
				
		)
	}
});
ReactDOM.render(
,document.getElementById("app"))

headerコード:

var React = require("react")
var Header= React.createClass({
	
	render:function(){
		var style={
		height:"10vh",
		background:"red",
		fontSize:"50px",
		textAlign:"center",
		lineHeight:"60px"
	}
		return(
			
    1
		)
	}
})
module.exports=Header;

contentコード:

var React = require("react") 
var Content=React.createClass({
	render:function(){
		var style={
		height:"80vh",
		background:"green",
		fontSize:"50px",
		textAlign:"center",
		lineHeight:"60px"
	}
		return(
			
    1
		)
	}
})
module.exports=Content;

footerコード:

var React = require("react")
var Footer=React.createClass({
	render:function(){
		var style={
		height:"10vh",
		background:"blue",
		fontSize:"50px",
		textAlign:"center",
		lineHeight:"60px"
	  }
		return(
			
    1
		)
	}
})
module.exports = Footer;

webpack.co.nfig.jsコード:

module.exports={
	entry:'./block/Main.js',/**    **/
	output:{/**    **/
		path:'./js',/**    **/
		filename:'style.js'/**      **/
	},
	module:{
		loaders:[
			{ 
			    test: /\.js$/, /**        js  **/
			    loader: "jsx-loader", /**        css－loader,coffee-loader,babel-loader**/
			}
		]
	} 
}
/****

1.                            

2.          a.js  b.JS              


***/