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

时间:2022-10-25 19:06:41
//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;//可以直接创建DOM
var 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>