关于webpack 启动资源服务器实现热加载 和es6 babel代码转化

/**
 * Created by joesbell on 2016/12/16.
 */
var webpack=require("webpack");
var path = require('path');
// 将相对路径转化为绝对路径
var appPath=path.resolve(__dirname, './app/main.js');
var  buildPath= path.resolve(__dirname, './build');

module.exports = {
    entry:[
        appPath
        ],
    output: {
        publicPath: "http://127.0.0.1:9090/build/",//publicPath设置为webpack-dev-server服务器下资源目录的绝对路径
        path:buildPath,
        filename: 'bundle.js',
    },
    module: {
        // 将jsx语法文件转为js语法，es6转成es5
        loaders: [
            {
            test: /\.jsx?$/,
            include: [
                // 只去解析运行目录下的 src 和 demo 文件夹
                // 将几个参数拼接成完成的路径
                path.join(__dirname, './app'),

            ],
            loaders: ['babel-loader?presets[]=es2015,presets[]=react']
            },
            // {
            //     test: /\.jsx?$/,
            //     exclude: /node_modules/,
            //     // 在这里添加 react-hot，注意这里使用的是loaders，所以不能用 query，应该把presets参数写在 babel 的后面
            //     loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
            // }
        ]
    },
    // 资源服务器，实现热加载
    devServer:{
        historyApiFallback:true,
        hot:true,
        inline:true,
        progress:true,
        port:9090 //端口你可以自定义
    }
    
    // module: {
    //     loaders: [{
    //         test: /\.jsx?$/,
    //         exclude: /node_modules/,
    //         loader: 'babel-loader',
    //     }]
    // },

    // // 添加插件
    // plugins: [
    //     new webpack.HotModuleReplacementPlugin()
    // ],
    // // 将es6代码转化为es5
    // babel: {
    //     presets: ['es2015']
    // },
};

*********************************************

上述代码配置好后，还需要到项目的package.json 文件下， 添加服务器配置

"scripts": {"build": "webpack",
    "start": "webpack-dev-server --hot --inline",
  },

然后直接命令行启动 npm run start 启动， 浏览器输入localhost:9090 即可