build

.eslintrc

@@ -0,0 +1,27 @@
+{
+    "extends": ["airbnb"],
+    "parserOptions": {
+        "ecmaVersion": 2016,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "settings": {
+        "import/parser": "babel-eslint",
+        "import/resolver": {
+            "webpack": {
+                "config": "webpack.config.js"
+            }
+        }
+    },
+    "rules": {
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+        "semi": [2, "never"]
+    }
+}

.gitignore

@@ -0,0 +1,11 @@
+build
+dist
+lib-cov
+coverage.html
+.DS_Store
+node_modules
+publish
+*.sock
+*.swp
+*.bat
+*.sh

.npmrc

@@ -0,0 +1,3 @@
+phantomjs_cdnurl=http://cnpmjs.org/downloads
+sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+registry=https://registry.npm.taobao.org

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-example",
+  "version": "1.0.0",
+  "description": "react example",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [
+    "react example"
+  ],
+  "author": "[email protected]",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/lobos/react-example.git"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.7",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.2",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-react-require": "^3.0.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.3",
+    "file-loader": "^0.11.1",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.3",
+    "node-sass": "^4.5.2",
+    "postcss-loader": "^1.3.3",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.3"
+  }
+}

src/index.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+import '_/styles/index.scss'
+
+class App extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {}
+  }
+
+  render() {
+    return (
+      <div>Hello world.</div>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))

src/styles/index.scss

@@ -0,0 +1,3 @@
+body {
+  font-size: 14px;
+}

webpack.config.js

@@ -0,0 +1,123 @@
+const path = require('path')
+const webpack = require('webpack')
+const autoprefixer = require('autoprefixer')
+
+module.exports = {
+  entry: {
+    // 需要编译的入口文件
+    app: './src/index.js',
+  },
+  output: {
+    path: path.join(__dirname, '/build'),
+
+    // 输出文件名称规则，这里会生成 'app.js'
+    filename: '[name].js',
+  },
+
+  // 引用但不打包的文件
+  externals: { react: 'React', 'react-dom': 'ReactDOM' },
+
+  plugins: [
+
+    // webpack2 需要设置 LoaderOptionsPlugin 开启代码压缩
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false,
+    }),
+
+    // Uglify的配置
+    new webpack.optimize.UglifyJsPlugin({
+      beautify: false,
+      comments: false,
+      compress: {
+        warnings: false,
+        drop_console: true,
+        collapse_vars: true,
+      },
+    }),
+  ],
+
+  resolve: {
+    // 给src目录一个路径，避免出现'../../'这样的引入
+    alias: { _: path.resolve(__dirname, 'src') },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        use: {
+          loader: 'babel-loader',
+
+          // 可以在这里配置babelrc，也可以在项目根目录加.babelrc文件
+          options: {
+
+            // false是不使用.babelrc文件
+            babelrc: false,
+
+            // webpack2 需要设置modules 为false
+            presets: [
+              ['es2015', { modules: false }],
+              'react',
+            ],
+
+            // babel的插件
+            plugins: [
+              'react-require',
+              'transform-object-rest-spread',
+            ],
+          },
+        },
+      },
+
+      // 这是sass的配置，less配置和sass一样，把sass-loader换成less-loader即可
+      // webpack2 使用use来配置loader，并且不支持字符串形式的参数了，必须使用options
+      // loader的加载顺序是从后向前的，这里是 sass -> postcss -> css -> style
+      {
+        test: /\.scss$/,
+        use: [
+          { loader: 'style-loader' },
+
+          {
+            loader: 'css-loader',
+
+            // 开启了CSS Module功能，避免类名冲突问题
+            options: {
+              modules: true,
+              localIdentName: '[name]-[local]',
+            },
+          },
+
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins() {
+                return [
+                  autoprefixer,
+                ]
+              },
+            },
+          },
+
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
+
+      // 当图片文件大于10KB时，复制文件到指定目录，小于10KB转为base64编码
+      {
+        test: /\.(png|jpg|jpeg|gif)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              name: './images/[name].[ext]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+}