react将组件编译成html,怎样打包react组件

怎样打包react组件

下面为各位介绍一下如何使用webpack打包一个简单react组件，希望对各位有帮助。

一、安装Webpack，并加载一个简单的React组件

全局的npm模块安装：npm install -g webpack

安装jsx-loadernpm install --save-dev jsx-loader

二、默认使用当前目录的自己新创建的webpack.config.js作为配置文件module.exports = {

entry: [

'./assets/js/entry.js'

],

output: {

path: __dirname + '/assets/',

publicPath: "/assets/",

filename: 'bundle.js'

},

module: {

loaders: [

{ test: /\.jsx?$/, loaders: ['jsx-loader?harmony'] }

]

}

};

三、定义了一个简单的React组件hello.js，使用ES6语法var React = require('react');

class Hello extends React.Component {

render() {

return (

Hello {this.props.name}!

);

}

}

module.exports = Hello;

创建entry.js入口文件，将一个Hello组件输出到界面：var React = require('react');

var Hello = require('./Hello');

React.render(, document.body);

创建根目录index.html文件

项目文件夹结构：+ assets/

- js/

Hello.js

entry.js

index.html

webpack.config.js

四、在当前目录执行webpack命令之后，在assets目录将生成bundle.js，打包了entry.js的内容webpack

五、通过npm安装Webpack开发服务器并启动它：npm install webpack-dev-server -g

webpack-dev-server --progress --colors

好现在可以通过 http://localhost:8080/webpack-dev-server/index.html 打开页面，如下：

更多React相关技术文章，请访问React答疑栏目进行学习！