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. ...
随机推荐
- Beta版总结会议
一,设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的app要解决一个令人头痛但无人具体来实现的这一社会困扰现象.因为学生或者社会人士在参加竞 ...
- The current identity (NT AUTHORITY/NETWORK SERVICE)
IIS错误提示: The current identity (NT AUTHORITY/NETWORK SERVICE) does not have write access to 'C:/WINDO ...
- 为什么我们拿Fork当收藏用
刚才看OSC源创会的视频,听到 @虫虫 说:中国人喜欢拿Fork当收藏用,这对硬盘是个很大的压力.我当时很认真地笑了笑.想想好像自己也Fork了一些东西啊. 是什么因素促使我去Fork一些东西呢?我大 ...
- PHP之compact()函数
PHP之compact()函数 compact()函数将变量转化为数组: <?php //直接调用函数 $a=1;$b=3;$c=4; var_dump($a,$b,$c); //自定义函数实现 ...
- sed命令详解
搜索 纠正错误 添加实例 sed 功能强大的流式文本编辑器 补充说明 sed 是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时 ...
- MVC开发模式下的用户角色权限控制
前提: MVC开发模式 大概思想: 1.在MVC开发模式下,每个功能都对应着不同的控制器或操作方法名(如修改密码功能可能对应着User/changepd),把每个功能对应的控制器名和操作方法名存到数据 ...
- grep 命令
简单介绍:grep命令是用于分析一行信息,若当中有我们所需要的信息,就将该行取出来. 语法结构:grep [-acinv] [--color=auto] '查找关键字' #{filename} -a: ...
- asp:Repeater实例备忘
1.前置部分 <asp:Repeater ID="rptPlanNo" runat="server" OnItemDataBound="rptP ...
- python3 黑板客爬虫闯关游戏（三）
第三关,先登录,再猜密码,这关难度较第二关大幅增加,要先去注册一个登录账号,然后打开F12,多登录几次,观察headers数据的变化 给出代码,里面注释很详细 import urllib.reques ...
- erlang 在线生成crashdump
一般说来抓dump 4种 方式: 1. erlang:halt(“abort”). 2. 在erlang shell下输入CTRL C + “大写的A” 3.等着进程崩溃 ...