怎样打包react组件
下面为各位介绍一下如何使用webpack打包一个简单react组件，希望对各位有帮助。
一、安装Webpack，并加载一个简单的React组件
全局的npm模块安装：
npm install -g webpack
安装jsx-loader
npm 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&<strong style="color:transparent">来源gao@daima#com搞(%代@#码网</strong>#39;);
class Hello extends React.Component {
render() {
return (
<h1>Hello {this.props.name}!</h1>
);
}
}
module.exports = Hello;
创建entry.js入口文件，将一个Hello组件输出到界面：
var React = require('react');
var Hello = require('./Hello');
React.render(<Hello name="Nate" />, document.body);
创建根目录index.html文件
<html>
<head>
</head>
<body>
<script src="/assets/bundle.js"></script>
</body>
</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相关技术文章，请访问gaodaima搞代码网进行学习！
以上就是怎样打包react组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：怎样打包react组件
转载请注明原文链接：怎样打包react组件
