關於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    便可