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打开页面，如下：
快速浏览更多在线 Demo
想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。
webpack 打包一个简单react组件的更多相关文章
- webpack 之 一个简单的基本生产环境配置
webpack 之 一个简单的基本生产环境配置 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = r ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- webpack打包器简单入门
概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...
- 如何创建一个前端 React 组件并发布到 NPM
首先npm文档摆在这里: https://www.npmjs.cn/ 参考组件 https://github.com/rakuten-rex/rex-dropdownhttps://www.npmjs ...
- asp.net mvc4+mysql做一个简单分页组件（部分视图）
在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...
- 跟我一起写一个hello-world react组件并发布到npm
第一步:初始化我们的配置 $ mkdir react-hello-world $ cd react-hello-world/ $ npm init -y 修改我们的package.json文件 //p ...
- Antd组件库，利用Menu组件模拟一个简单Tree组件
当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...
- 从一个简单的组件化封装写优化DOM操作
/* *缺点 * 1. 还需要我们自己手工维护dom状态,以数据的思想去思考 *2. 数据改变后,还需要我们自己手动改变dom *3. * */ class LikeButton{ construct ...
- webpack打包工具简单案例
目录结构: 入口文件:main.js 把项目所有的依赖文件都放进main.js //1.使用CommonJs的模块化规范 const {add, mul} = require('./mathUtil. ...
随机推荐
- jpeg huffman coding table
亮度DC系数的取值范围及序号: 序号(size) 取值范围 0 0 1 - ...
- apache 配虚拟主机转发到tomcat
我用的是apache2.4.23, 连接tomcat使用自带的 proxy-ajp,需要开启相关模块 引用 http://www.server110.com/apache/201404/10273.h ...
- linux创建新用户以及修改密码
1. 使用root账户创建新用户 useradd webuser 2. 修改新增的用户的密码 passwd webuser 这时候会提示你输入新的密码: 注意:不要用su webuser进入该账户修改 ...
- 【转】PHP网站（nginx、php-fpm、mysql） 用户权限解析
这篇文章我们就特别来讲解下,nginx.php-fpm 以及 mysql 运行在各个用户下的配置. 先来做个说明:nginx本身不能处理PHP,它只是个web服务器.当接收到客户端请求后,如果是php ...
- tar 解压bz2报错 Cannot exec: No such file or directory
tar: bzip2: Cannot exec: No such file or directorytar: Error is not recoverable: exiting now 需要安装bzi ...
- 常用js代码集
<img src="{:url('publics/verify')}" onclick="this.src='{:url('publics/verify')}'&q ...
- 【Network】Neutron-Docker-K8S
Neutron-Docker-K8S openstack/neutron: Neutron is a virtual network service for Openstack. Neutron和SD ...
- mysql‘事件计划已关闭。事件只能在服务器启动并开启事件计划时才能处理。'的警告
通过下列语句查询event是否开启 show variables like '%sche%'; 通过执行下列语句,来开启event_schedulerset global event_schedule ...
- python 端口扫描
#!/usr/bin/env python #-*- coding:utf-8 -*- import socket #iptable=[] nmapport=[21, 22, 23, 80, 110] ...
- 从C++实现Ping开始说起
在C++中实现ping功能,并不难.但真正了解ping是需要花费一番功夫的. Ping功能是在ICMP基础上实现的.IP协议并不是一个可靠的协议,它不保证数据被送达,那么,保证数据送达的工作应该由其他 ...