码迷,mamicode.com
首页 > Web开发 > 详细

Webpack Dev Server + React Hot Loader

时间:2015-11-06 10:51:04      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:

1、安装

npm install webpack-dev-server react-hot-loader --save-dev

2、配置server.js

var webpack = require(‘webpack‘);
var WebpackDevServer = require(‘webpack-dev-server‘);
var config = require(‘./webpack.config‘);

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true
}).listen(3000, ‘localhost‘, function (err, result) {
        if (err) {
            console.log(err);
        }

        console.log(‘Listening at localhost:3000‘);
    });

3、配置webpack.config.js

var webpack = require(‘webpack‘);

module.exports = {
    entry: {
        //index: ‘./js/index.js‘
        index: [
            ‘webpack-dev-server/client?http://localhost:3000‘,
            ‘webpack/hot/dev-server‘,
            ‘./js/index.js‘
        ]
    },
    output: {
        path: ‘/js/‘,
        filename: ‘[name].bundle.js‘,
        publicPath: ‘/js/‘
    },
    module: {
        loaders: [
            /*{
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: ‘babel‘
            },
            {
                loader: ‘exports‘
            },*/
            {
                test: /\.jsx?$/,
                loader: ‘react-hot!babel‘,
                exclude: /(node_modules|bower_components)/
            }
        ]
    },
    resolve: {
        extensions: [‘‘, ‘.js‘, ‘.jsx‘]
    },
    plugins: [
        //new webpack.optimize.CommonsChunkPlugin(‘common.js‘),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

4、启动

node server

也可以配置npm命令,在package.json中添加如下代码

"scripts": {
    "start": "node ./server-webpack.js"
}

运行命令 

npm start

 

Webpack Dev Server + React Hot Loader

标签:

原文地址:http://www.cnblogs.com/CodingJS/p/4941838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!