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