安装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打开页面，如下：

快速浏览更多在线 Demo

想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。

webpack 打包一个简单react组件的更多相关文章

  1. webpack 之 一个简单的基本生产环境配置

    webpack 之 一个简单的基本生产环境配置 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = r ...

  2. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  3. webpack打包器简单入门

    概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...

  4. 如何创建一个前端 React 组件并发布到 NPM

    首先npm文档摆在这里: https://www.npmjs.cn/ 参考组件 https://github.com/rakuten-rex/rex-dropdownhttps://www.npmjs ...

  5. asp.net mvc4+mysql做一个简单分页组件（部分视图）

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  6. 跟我一起写一个hello-world react组件并发布到npm

    第一步:初始化我们的配置 $ mkdir react-hello-world $ cd react-hello-world/ $ npm init -y 修改我们的package.json文件 //p ...

  7. Antd组件库，利用Menu组件模拟一个简单Tree组件

    当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...

  8. 从一个简单的组件化封装写优化DOM操作

    /* *缺点 * 1. 还需要我们自己手工维护dom状态,以数据的思想去思考 *2. 数据改变后,还需要我们自己手动改变dom *3. * */ class LikeButton{ construct ...

  9. webpack打包工具简单案例

    目录结构: 入口文件:main.js 把项目所有的依赖文件都放进main.js //1.使用CommonJs的模块化规范 const {add, mul} = require('./mathUtil. ...

随机推荐

  1. jq 个性的隔行变色

      效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...

  2. linux虚拟系统determining IP information for eth0...failed

    这几天学习老男孩Linux运维 其中有一节视频进行连接网络时出现: 上网搜了很多方法,包括:向如下三个文件中添加如下代码 check_link_down() { return 1; } (1)/etc ...

  3. 3d转换-正方体-Html5Css3-遁地龙卷风

    (-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...

  4. PYTHON map（）函数详解

    map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 栗子如下↓ 图片来自于网上 def f(x,a): return x+x ...

  5. js中bind、call、apply函数的用法

    最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...

  6. Google Code Jam 2016 Round 1C C

    题意:三种物品分别有a b c个(a<=b<=c),现在每种物品各选一个进行组合.要求每种最和最多出现一次.且要求任意两个物品的组合在所有三个物品组合中的出现总次数不能超过n. 要求给出一 ...

  7. NodeJS 模块开发及发布详解

    NodeJS 是一门年轻的语言,扩展模块并不太全,经常我们想用某个模块但是却找不到合适的.比如前两天我需要使用hmac和sha1来做签名,就没有找到一个比较好用的模块,这时候就需要我们自己来实现相应的 ...

  8. sh2.sed脚本练习

    1,删除/etc/grub.conf文件中行首的空白字符: sed -r 's@^[[ :spapce: ]] +@@g' /etc/grub.conf 2.替换/etc/inittab 文件中&qu ...

  9. 【JavaScript】--ajax

    1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传 ...

  10. jquery原生对象

    获取jquery的原生对象: $("#div")[0]