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'
}
]
}
}