極簡版 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 入門教程