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. ...
随机推荐
- hdu 4946 2014 Multi-University Training Contest 8
Area of Mushroom Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- android 选择图片或拍照时旋转了90度问题
由于前面的博文中忽略了点内容,所以在这里补上,下面内容就是解决拍照或者选择图片显示的时候图片旋转了90度或者其他度数问题,以便照片可以正面显示:具体如下: 首先直接看上面博文下的拍完照或者选完图后处理 ...
- 服务器通过微信公众号Token验证测试的代码（Python版）
我在阿里云租了一个云服务器,然后想把这个作为我的微信公众号的后台,启用微信公众号开发者需要正确的响应微信服务器的Token验证,为此把这个验证的Python代码贴出来,只要在服务器上运行这段代码,注意 ...
- BZOJ4591——[Shoi2015]超能粒子炮·改
1.题意:求 2.分析:公式恐惧症的同学不要跑啊QAQ 根据lucas定理-- 这一步大家都能懂吧,这是浅而易见的lucas定理转化过程,将每一项拆分成两项 那么下一步,我们将同类项合并 我们观察可以 ...
- JS学习-创建对象
1.标准创建对象模式 var person = new Object(); person.name = "Nicholas"; person.age = 29; person.jo ...
- C# IComparable接口、IComparer接口和CompareTo(Object x)方法、Compare()方法
在项目中经常会用到字符串比较,但是有时候对字符串的操作比较多,规则各异.比如有的地方我们需要用排序规则,有的地方需要忽略大小写,我们该如何写一个比较容易操作的比较方法呢?重新实现IComparer接口 ...
- LinuxMysql命令操作数据库
键入命令mysql -uroot -p密码查看所有表:mysql> show databases;进入表use multidomain_db;删除表:DROP table colour 执行sq ...
- 后台访问 JS解决跨域问题
今天看了看以前做的一个小项目(其实就是一个页面),分享一下当时解决跨域问题的: 背景:公司把项目部署在多台服务器上,防止一台服务器崩溃后,其他的可以继续访问,对应本公司来说,某台服务器出问题后,技术人 ...
- phpstudy 局域网访问
安装mantis缺陷管理系统,我使用的是phpstudy集成环境.之前使用wamp,同事说phpstudy好更新php版本,所有就用phpstudy了. 今天安装好phpstudy,下载mantis安 ...
- gnuWin32-mini-2016.10.30
2016-10-28 04:48 1,017,856 awk.exe ver 4.1.4 2016-10-29 00:26 77,312 bc.exe ver 1.06 2016-10-30 01:4 ...