用webpack来构建react-antd开发环境
【首先安装nodejs】
下载zip包，解压，然后把bin目录加入path里面，ok
设置仓库地址，防止被墙
npmconfigsetregistry"http://registry.npm.taobao.org"
npmconfiglist//可以查看配置
////////////////////////////////////
【接着开始环境构建】
mkdird:/antd_1/mydemo3
cdd:/antd_1/mydemo3
安装webpack
cdd:/antd_1/mydemo3
npminit//自定义创建package.json
//or
npminit-yes//可以创建默认的package.json
//局部安装webpack
npminstallwebpack--save-dev
//安装React,--save命令用于将包添加至package.json文件,执行命令:
npminstallreactreact-dom--save-dev
//安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。
npminstallbabel-corebabel-loaderbabel-preset-es2015babel-preset-react--save-dev
webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到自动刷新的效果。
安装webpack-dev-server执行命令:
npminstallwebpack-dev-server--save-dev
在package.json文件中为scripts添加,方便使用命令:
"scripts":{
"build":"webpack",
"dev":"webpack-dev-server--devtooleval--progress--colors--content-basebuild"
}
这里的命令是webpack,如果需要压缩编译的话,将webpack改成webpack-p
代码编译结束:
1.根目录下执行命令(开发时)
npmrundev
2.浏览器直接访问:
http://localhost:8181/index.html
3,打包
npmrunbuild
然后把build目录拷贝走就好了
另外，每次修改文件，都会实时的更新到浏览器里面.
接着添加antd组件
npminstallantd--save-dev
添加其他装载器
npminstallstyle-loadercss-loaderurl-loaderfile-loaderlessless-loader--save-dev
添加按需加载插件(如果不安装，下面使用会提示)
npminstallbabel-plugin-import--save-dev//此插件安装前，必须先安装file-loader
npminstallbabel-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还没试lessloadersassloaderstylesloader
////BannerPlugin插件给输出的文件头添加注释
////reactwebpack打包体积优化--待测试
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()
]
};参考：
http://blog.csdn.net/pcaxb/article/details/52212367#
https://github.com/ant-design/babel-plugin-import