React+Webpack快速上手指南

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

创建React项目

npm install -g create-react-app
create-react-app ReactWebpack
cd ReactWebpack
npm start

通过 create-react-app 就可以创建一个react的项目，进入项目目录执行 npm start 就可以看到运行成功的页面。

修改React项目

react 成功页面

react 成功页面

安装 Webpack

//全局安装webpack，优点是打包时可以直接输webpack命令
npm install -g webpack

//在本项目中安装webpack，--save-dev的意思是将依赖写入项目的package.json文件
npm install --save-dev webpack

webpack 成功页面

安装和配置 Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

npm install --save-dev babel-core babel-loader  babel-preset-es2015 babel-preset-react

Babel 成功页面

配置 webpack.config.js

• 在项目目录下新建 webpack.config.js
• 在webpack.config.js

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
                query: {
                    presets: ['es2015','react']
                }
            }
        ]
    }
};

修改public的index.html

在index.html中添加js的引用

修改index.html

安装并启用webpack-dev-server

npm install --save-dev webpack-dev-server

修改project.json,启动webpack-dev-server

"dev": "webpack-dev-server --devtool eval --progress --colors --content-base public",

修改index.html

源码下载