一、创建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