極簡版 react+webpack 腳手架

目錄結構

asset/

• css/
• img/

src/

• entry.js ------------------------ 入口文件

.babelrc

index.html

package.json

webpack.config.js

運行命令

1. 安裝依賴：npm install
2. 運行項目：npm start

配置預覽

package.json：

{
  "name": "react_webpack_demo",
  "version": "1.0.0",
  "description": "a demo using react and webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 8080 --hot --inline --progress --colors --devtool eval"
  },
  "author": "Ruth",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-sass": "^3.11.2",
    "react-router": "^3.0.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  }
}

webpack.config.js：

var webpack = require('webpack');

// css 單獨打包，使用該插件後就不須要配置style-loader了
// 原本是內聯在最終的網頁裏，如今經過外聯方式，能夠在/dist文件夾下找到單獨的css文件
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        index: './src/entry.js', // 惟一的入口文件
        vendor: ['react'] // 這裏是依賴的庫文件配置，和CommonsChunkPlugin配合使用能夠單獨打包
    },
    output: {
        path: '/dist', //打包後的文件存放的地方
        filename: 'bundle.js',
        publicPath: 'http://localhost:8080/dist/' //啓動本地服務後的根目錄
    },
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
            loader: 'babel',
            // 能夠單獨在當前目錄下配置.babelrc，也能夠在這裏配置
            query: {
                // presets: ['es2015', 'react']
            },
            // 排除 node_modules 下不須要轉換的文件，能夠加快編譯
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style", "css")
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style", "css!sass")
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'url?limit=819200'
        }]
    },
    plugins: [
        new ExtractTextPlugin('main.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.js'
        })
    ]
};

.babelrc：

{
  "presets": [
    "react", 
    "es2015"
  ],
  "plugins": []
}

其餘

須要更多其它配置，請參考 webpack_scaffold

github地址：react\_webpack\_scaffold

參考資源

1. 掘金-react 搜索

2. 【資料彙總】React (中文)

3. React.js 2016 最佳實踐

4. React.js 教程

5. React.js 官網

6. 十分詳細的React入門實例

後記

搞配置的過程當中，一直報錯，原來是本身沒有安裝 babel-preset-es2015 和 babel-preset-react，致使即便在 .babelrc 中已經配置了還報錯T_T，具體參看 Babel 入門教程