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>



标签：

相关文章