React入门---开始前的准备(下)-3

React开始前的准备(下)：

·配置webpack热加载（热加载就是修改js文件，点击保存之后，浏览器会自动刷新，提高开发效率）

1. 全局安装：

npm install webpack -g

npm install webpack-dev-server -g

2. 当前项目安装：

npm install webpack --save

npm install webpack-dev-server --save

npm install html-webpack-plugin -D

3. 初始化配置

创建文件：webpack.config.js

里面内容如下：

var webpack = require('webpack');

var path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

//这个插件可以把打包的budle.js使用<scipt>引入到html中

const htmlWebpackPluginConfig = new htmlWebpackPlugin({

    template: './app.html',

    inject: true,

    filename: 'index.html'

})

module.exports = {

    context:__dirname+'/src',

    entry:"./js/index.js",

    module:{

        loaders: [{

            test:/\.js?$/,

            exclude:/(node_modules)/,

            loader: 'babel-loader',

            query:{

                presets:['react','es2015']

            }

        }]

    },

    output:{

        path:__dirname + "/dist/assets",

        filename:"bundle.js"

    },

    devServer: {

        contentBase: __dirname + "/src",  // New

    },

    plugins:[htmlWebpackPluginConfig]

}

4.React热加载

这个时候，react和webpack的开发环境就已经搭建的差不多了，接下来我们会结合react的组件写一个小的demo，通过webpack的热加载，来了解热加载同时接触第一个react组件的编译。

webpack-dev-server