用webpack來構建react-antd開發環境

【首先 安裝 nodejs】
下載zip包，解壓，然後 把bin目錄加入 path裏面，ok
設置 倉庫地址，防止被牆
npm config set registry "http://registry.npm.taobao.org"
npm config list //可以查看配置
////////////////////////////////////

【接着開始環境構建】
mkdir d:/antd_1/mydemo3
cd d:/antd_1/mydemo3

安裝 webpack
cd d:/antd_1/mydemo3
npm init //自定義創建package.json
// or
npm init -yes //可以創建默認的package.json

// 局部 安裝 webpack
npm install webpack --save-dev

// 安裝React,--save 命令用於將包添加至 package.json 文件,執行命令:
npm install react react-dom --save-dev

// 安裝babel插件,babel插件是webpack需要的加載器,如果沒有這幾個加載器我們的jsx語法，和es2015語法就會報錯。
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

webpack-dev-server允許我們可以把本地項目跑在像nginx那樣的web服務器上，更重要的是我們可以在package.json文件內定義scripts，同時修改webpack的配置文件來達到自動刷新的效果。
安裝webpack-dev-server執行命令:
npm install webpack-dev-server --save-dev

在package.json文件中爲scripts添加,方便使用命令:

"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

這裏的命令是webpack,如果需要壓縮編譯的話,將webpack改成webpack -p

代碼編譯結束:
1.根目錄下執行命令 (開發時)
npm run dev
2.瀏覽器直接訪問:
http://localhost:8181/index.html

3,打包
npm run build
然後 把build 目錄拷貝走就好了

另外，每次修改 文件，都會實時的更新到 瀏覽器裏面.

接着 添加antd 組件
npm install antd --save-dev
添加 其他裝載器
npm install style-loader css-loader url-loader file-loader less less-loader --save-dev
添加 按需加載插件(如果不安裝，下面使用會提示)
npm install babel-plugin-import --save-dev // 此插件安裝前，必須先安裝 file-loader
npm install babel-plugin-transform-runtime --save-dev
在 webpack.config.js 裏面配置相應 的 loader

【備註】
還可以提取公共代碼 用插件 CommonsChunkPlugin -- 待測試
還可以css單獨提取出來成爲一個獨立的文件 用插件 extract-text-webpack-plugin
///// 下面這個鏈接詳細講解了 url-loader的用法和注意事項 ，特別提到 react中引用圖片的打包方式 -- 待測試
webpack踩坑之路 (2)——圖片的路徑與打包
http://www.cnblogs.com/ghost-xyx/p/5812902.html
//// css 預處理器 loader 還沒試 less loader sass loader styles loader
//// BannerPlugin 插件 給輸出的文件頭添加 註釋
//// react webpack打包體積優化 -- 待測試
http://blog.csdn.net/code_for_free/article/details/51583737
//// 引入 andt 組件時，提示 要按需來加載資源， 要用
https://www.npmjs.com/package/babel-plugin-import 來 加載組件，避免文件太大
https://github.com/ant-design/babel-plugin-import 具體用法參考
具體 webpack.config.js文件有2中寫法，如果 展示時沒有樣式，就是黃色部分造成的：
1，exclude 被過濾掉了，導致 樣式不能按需加載
2，style 引用錯了，這裏必須寫 css，否則 也會被過濾掉樣式.

整個 webpack.config.js文件內容：

/**
 * 測試環境用
 */
'use strict';

var path = require('path');
var webpack = require('webpack');
module.exports = {
    //devtool: 'eval-source-map', // 如果出錯，可以知道源文件的位置 -- 這個會使得編譯後的js文件變大

    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    devServer: {
        inline: true, // 實時刷新
        historyApiFallback: true,  //不跳轉
        port: 8181
    },
    module: {
        loaders: [
            {
      				test:/\.css$/,
      				//exclude:/node_modules/, // 這裏千萬要注意了，按需加載時，沒有樣式，這裏弄的
      				loader:"style-loader!css-loader"
      			},
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['transform-runtime', ['import', {
                      libraryName: 'antd',
                      style: 'css' // or true or css 這裏必須是 css，否則樣式不能加載
                    }]]
                }
            }
        ]
    },

    plugins: [
      new webpack.LoaderOptionsPlugin({
          // test: /\.xxx$/, // may apply this only f
          options: {
            // babel: {
            //     //presets: ['es2015', 'stage-0', 'react'],
            //     plugins: ['transform-runtime', ['import', {
            //       libraryName: 'antd',
            //       style: 'true' // or true
            //     }]]
            // }
          }
        }),
        new webpack.BannerPlugin('文件頭註釋寫這裏吧!'),
        new webpack.optimize.UglifyJsPlugin({
    			compress:{
    				warnings:true
    			},
    			output:{
    				comments:true
    			}
    		}),
        new webpack.DefinePlugin({
          'process.env': {
              NODE_ENV: '"production"'
          }
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

參考：
[url]http://blog.csdn.net/pcaxb/article/details/52212367#[/url]
[url]https://github.com/ant-design/babel-plugin-import[/url]