react ＋ webpack

webpack 配置：

先看 package.json

{
  "name": "ptt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js”,  // npm start 命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zouzoutingting1215/appDemo.git"
  },
  "author": "ptt",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/zouzoutingting1215/appDemo/issues"
  },
  "homepage": "https://github.com/zouzoutingting1215/appDemo#readme",
  "devDependencies": {   // —save-dev  环境配置
    "babel-cli": "^6.18.0”,  
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-plugin-antd": "^0.5.1”,  // babel-plugin-antd 被 babel-plugin-import 替代
    "babel-plugin-import": "^1.0.1",
    "babel-preset-es2015": "^6.18.0”,  // 支持 ES6 写法
    "babel-preset-react": "^6.16.0”,   // 支持 react 规则 
    "babel-preset-react-hmre": "^1.1.1”,  // 相当于热加载
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1”,  // 可以自动生成 html 文件
    "imports-loader": "^0.6.5",
    "node-sass": "^3.11.2",
    "postcss-loader": "^1.1.1”,  // 与下面的搭配，将 rem 转为px
    "postcss-pxtorem": "^3.3.1",
    "rc-form": "^1.0.1",
    "react-css-modules": "^4.0.3",
    "react-hot-loader": "^3.0.0-beta.6",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3"
  },
  "dependencies": {   // 需要的库  －－save
    "antd-mobile": "^0.9.8",
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  }
}

webpack.config.js  开发环境
var path = require('path’);  //  引入需要的文件
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var px2rem = require('postcss-pxtorem’);  // 转译 rem
const px2remOpts = {
    rootValue: 100,
    propWhiteList: [],
};

var ROOT_PATH = path.resolve(__dirname);   // 定义文件夹路径
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var NODE_MODULE = path.resolve(ROOT_PATH, 'node_modules');

module.exports = {   // module
    entry: [  // 入口
        'webpack-dev-server/client?http://localhost:3000',  // 资源服务器地址
        'webpack/hot/only-dev-server',
        path.resolve(APP_PATH, 'index.js’)  // 从 src 下的 index.js 进入
    ],
    output: {  // 出口
        path: BUILD_PATH,  // 生成 build 文件夹
        filename: 'bundle.js’,  // 生成 bundle.js
        publicPath: ‘/'  路径配置，与 html文件中 引入 bundle.js 有关
    },
    devtool: 'eval-source-map’,  // 错误提示，webpack 提供了好几个
    resolve: {
        modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
        extensions: ['', '.web.js','.js', '.jsx','.json’], 
        // 路径别名
        alias:{
            app:path.resolve(__dirname,'src/js'),
            // 以前你可能这样引用 import { Nav } from '../../components'
            // 现在你可以这样引用 import { Nav } from 'app/components'

            style:path.resolve(__dirname,'src/styles')
            // 以前你可能这样引用 @import "../../../styles/mixins.scss"
            // 现在你可以这样引用 @import "style/mixins.scss"
        }
    },
    module: {  // 经常打交道的地方
        loaders: [
            {
                test: /\.scss$/,
                loaders: ['style','css','sass']
            },
            {
                test: /\.css$/,
                loaders: ['style','css','postcss']
            },
            {
                test: /\.(gif|jpe?g|png|ico)$/,
                loader: 'url?limit=10000'
            },
            {
                test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
                loader: 'url?limit=10000'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                include: APP_PATH
            },
        ]
    },

    plugins: [  // 插件
        new webpack.HotModuleReplacementPlugin()
    ],
    postcss: ()=> [px2rem(px2remOpts)]  // rem
};

项目结构：

图片.png