react+wabpack 搭建

一、创建package.json文件
npm init
一路回车，包文件创建成功。
二、安装react（--save 可以将依赖保存到包文件中）
npm install react react-dom --save-dev
三、安装babel
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
四、webpack相关
1、安装webpack
npm install webpack --save-dev
2、项目搭建
我的项目目录如下：

app内包含components、js、css、images等静态资源，main.js是入口文件，build是打包后的文件夹
这里需要创建配置文件webpack.config.js，大致内容如下：

var path = require('path');
var webpack = require('webpack');
//var precss = require('precss');
//var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
    // 入口
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    // 输出
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js',
        publicPath:'/'
    },
    // 服务器配置
    devServer: {
        inline: true,//自动更新
        historyApiFallback: true,
        port: 8181
    },
    // 加载器
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }

            },
            {
                test: /\.(jpeg|png|gif|svg)$/i,
                exclude: /bower_components/,
                loader: 'url?limit=1000&name=/img/[name].[ext]'
            },
            {
                test: /\.scss/,
                loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader!sass-loader"})
            }
        ]
    },
    //插件项
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin("css/[name].css"),//打包输出路径
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'app/ico'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'app/images/sprite.png'),
                css: path.resolve(__dirname, 'app/css/sprite.scss')
            },
            apiOptions: {
                cssImageRef: "../images/sprite.png"
            }
        })
    ]
};

服务器配置需要安装webpack-dev-server,它是一个小型的Node.js Express服务器
npm install webpack-dev-server --save-dev

启动服务器后，可以通过http://localhost:8181/访问页面
要想达到浏览器自动刷新，可以采用inline模式
1、当以命令行启动webpack-dev-server时,需要做两点：
在命令行中添加--inline命令
在webpack.config.js中添加devServer:{inline:true}
2、当以Node.js API启动webpack-dev-server时,我们也需要做两点:
由于webpack-dev-server的配置中无inline选项,我们需要添加webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口点中.
将 <script src="http://localhost:8181/webpack-dev-server.js"></script>添加到html文件中

热更新（HMR）：
在命令行中运行inline模式，并启用热模块替换
这里只需要多增加 --hot指令就OK了.如下所示.

webpack-dev-server --inline --hot
注意:命令行模式下,webpack.config.js中一定要配置output.publicPath来指定编译后的包(bundle)的访问位置.

在Nodejs API中运行inline模式，并启用热模块替换
这里需要做以下三点:

在webpack.config.js的entry选项中添加:webpack/hot/dev-server
在webpack.config.js的plugins选项中添加:new webpack.HotModuleReplacementPlugin()
在webpack-dev-server的配置中添加：hot:true

六、安装webpack loader
上面的配置文件中配置了加载器，主要有url-loader，saas-loader，webpack-spritesmith等，这里简单介绍sass编译打包、icon合并精灵图

1、saas-loader
安装前，需要安装css-loader、style-loader、extract-text-webpack-plugin实现css独立打包，然后安装node-sass sass-loader
npm install --save-dev css-loader style-loader node-sass sass-loader
安装成功之后，在配置文件中添加加载项和配置css单独打包输出路径
2、icon合并精灵图
与gulp-spritesmith类似，这里是用webpack-spritesmith
npm install --save-dev webpack-spritesmith

new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'app/ico'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'app/images/sprite.png'),
                css: path.resolve(__dirname, 'app/css/sprite.scss')
            },
            apiOptions: {
                cssImageRef: "../images/sprite.png"
            }
        })

配置源文件和目标生成文件所在的位置，具体配置方式和使用方法见https://www.npmjs.com/package/webpack-spritesmith