安装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. Java 中文乱码问题总结

    开发java应用出现乱码是很常见的,毕竟现在unicode的使用还不是很广泛,在使用gb2312(包含了gbk简体,big5繁体)的系统中要正确 实现中文的display和数据库的存储是最基本的要求. ...

  2. c语言经典算法——查找一个整数数组中第二大数

    题目: 实现一个函数,查找一个整数数组中第二大数. 算法思想: 设置两个变量max1和max2,用来保存最大数和第二大数,然后将数组剩余的数依次与这两个数比较,如果这个数a比max1大,则先将max1 ...

  3. C语言操作注册表 写入 读取信息

    #include <stdio.h>#include <windows.h>int main(void){char regname[]="Software\\Micr ...

  4. 纵观jBPM:从jBPM3到jBPM5以及Activiti5

    http://www.infoq.com/cn/articles/rh-jbpm5-activiti5/ 作者 荣浩 发布于 2010年12月28日 | 注意:GTLC全球技术领导力峰会,500+CT ...

  5. bzoj4314

    首先,我们考虑原题取消k的限制后怎么做. 设(xy)是一个n次单位根,f(x)=(1+x^0)*(1+x^1)*(1+x^2)*...*(1+x^n-1) 参见 http://bx2k.is-prog ...

  6. JavaScript的模块化之AMD&CMD规范

    前端开发常常会遇到的问题: 1.恼人的命名冲突: 2.繁琐的文件依赖: 模块化开发的优势: 1.解决命名冲突和依赖管理: 2.模块的版本管理: 3.提高代码的可维护性: 4.前端性能优化: JavaS ...

  7. bzoj4398:福慧双修

    学习了一下最短路的姿势,这个建图方法好妙啊,虽然不会证明正确性…… #include <bits/stdc++.h> #define N 220000 #define INF 100000 ...

  8. SDK,API,DLL名词解释

    SDK (software devalopment kit) 软件开发工具包 : 一般都是一些软件工程师Wie特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. API (A ...

  9. c#和js互通的AES加密解密

    一.使用场景 在使用前后端分离的框架中常常会进行传输数据相互加密解密以确保数据的安全性,如web Api返回加密数据客户端或web端进行解密,或者客户端或web端进行加密提交数据服务端解密数据等等. ...

  10. Ajax文件上传