怎样打包react组件

怎样打包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');
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相关技术文章,请访问React答疑栏目进行学习!

以上就是怎样打包react组件的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读