标签:
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