您的位置：首页 > Web前端 > React

react-webpack 学习笔记～～第一步～环境

2015-05-29 16:09 691 查看 
//webpack.config.js   内容如下
module.exports = {
// 程序的入口文件
entry: './app/src/app.js',
output: {
// 所有打包好的资源的存放位置
path: './public/build',
// 使用url-loader 的资源的前缀
publicPath: './build/',
// 生成的打包文件名
filename: 'bundle.js'
},
module: {
loaders: [
{
// 用于匹配加载器支持的文件格式的正则表达式
test: /\.(js)$/,
// 要使用的加载器类型
// 加载器支持通过查询字符串的方式接收参数
loader: 'jsx-loader?harmony'
},
{
test: /\.(scss)$/, loader: "style-loader!raw-loader!sass-loader"
},
{
test: /\.(png|jpg)$/,
// url-loader 支持base64 编码的行内资源
loader: 'url-loader?size=8192'
}
]
}
};
npm install -g webpack
所有相关文件均需要npm install 加载安装
相关借鉴
http://rhadow.github.io/2015/03/23/webpackIntro/
加载好后支持require es6等语法
require('../assets/scss/demo.scss');var React = require('react');var R = React.DOM;//可以直接创建DOM
<img className="Logo" src={require('../img/people.jpg')} />
所有资源均支持引用
第一步引用文件全文
require('../assets/scss/demo.scss');var React = require('react');var R = React.DOM;//可以直接创建DOMvar Logo = React.createClass({render: function () {return (R.ul({className:"ul-wrap"},R.li({className:"ul-li"},R.img({className:"Logo",src:require('../img/people.jpg')}))))}});module.exports = Logo;
主入口app.js
var React = require('react');var Logo = require('./logo.js');React.render(<Logo/>, document.body);
html文件为
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><body><script src="public/build/bundle.js"></script></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航