React News Site 新闻站

Learn React & Webpack by building the Hacker News front page

from https://github.com/theJian/build-a-hn-front-page

1.安装nodejs

2.安装webpack

npm i webpack -g

3.安装webpack-dev-server

npm i webpack-dev-server -g

4.安装依赖

4.1安装React

npm i react react-dom --save

4.2安装Jquery

npm i jquery --save

4.3安装Babel的loader

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

4.4安装资源引入loader

npm install url-loader file-loader --save-dev

npm install css-loader style-loader --save-dev

5.webpack配置文件

5.1项目工程下创建webpack.config.js，配置代码如下：

 

var path = require('path')

module.exports = {
    entry: path.resolve(__dirname, 'app/app.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015','react']
                }
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192'
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    }
}