webpack 打包一个简单react组件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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打开页面，如下：

技术分享

 

[转载] http://www.cnblogs.com/fastmover/p/4867599.html

以上是关于webpack 打包一个简单react组件的主要内容，如果未能解决你的问题，请参考以下文章

node.js学习之webpack打包react最简单用法

react实现的tab切换组件

JavaScript系列文章：React总结之Webpack模块组织

react高级特性

使用通过 react、redux 和 react-redux 完成的组件以及在 react 应用程序中使用 webpack 构建时出错

react组件化开发发布到npm