我有以下热重新加载配置:
dev.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
}),
],
};
的package.json
{
"name": "Brian",
"version": "0.5.0",
"description": "A hard&ruthless data reporter",
"scripts": {
"clean": "rimraf dist",
"build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
"build:production": "npm run clean && npm run build",
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"start": "node bin/server.js",
"test": "karma start"
},
"keywords": [
"react",
"reactjs",
"babel6",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"license": "MIT",
"authors": [],
"contributors": [],
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.8.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2017": "^1.4.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"bootstrap-loader": "^1.0.10",
"bootstrap-sass": "^3.3.6",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.19.0",
"exports-loader": "^0.6.3",
"express": "^4.13.4",
"express-open-in-editor": "^1.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"imports-loader": "^0.6.5",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-mocha": "^1.0.1",
"karma-webpack": "^1.7.0",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"mocha": "^2.2.5",
"morgan": "^1.7.0",
"node-sass": "^3.7.0",
"postcss-import": "^8.1.1",
"postcss-loader": "^0.9.1",
"react-hot-loader": "^1.3.0",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0",
"webpack-merge": "^0.12.0"
},
"dependencies": {
"chart.js": "^1.1.1",
"classnames": "^2.2.5",
"flag-icon-css": "^1.3.0",
"griddle-react": "^0.5.0",
"isomorphic-fetch": "^2.2.1",
"moment": "^2.13.0",
"moment-timezone": "^0.5.4",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-bootstrap-daterangepicker": "^3.0.0",
"react-chartjs": "jhudson8/react-chartjs",
"react-document-meta": "^2.0.3",
"react-dom": "^15.4.1",
"react-intl-redux": "0.0.7",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-router-bootstrap": "^0.23.0",
"react-router-redux": "^4.0.4",
"react-s3-uploader": "^3.0.3",
"react-select": "1.0.0-beta13",
"react-transform-hmr": "^1.0.4",
"redux": "^3.5.2",
"redux-form": "^5.2.3",
"redux-logger": "2.6.0",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"underscore": "^1.8.3"
}
}
仓/ server.js
var fs = require('fs');
var babelrc = fs.readFileSync('./.babelrc');
var config;
try {
config = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
require('babel-core/register')(config);
require('../server');
server.js
const http = require('http');
const express = require('express');
const app = express();
app.use(require('morgan')('short'));
(function initWebpack() {
const webpack = require('webpack');
const webpackConfig = require('./webpack/common.config');
const compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath,
}));
app.use(require('webpack-hot-middleware')(compiler, {
log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000,
}));
app.use(express.static(__dirname + '/'));
})();
app.get(/.*/, function root(req, res) {
res.sendFile(__dirname + '/index.html');
});
const server = http.createServer(app);
server.listen(process.env.PORT || 3000, function onListen() {
const address = server.address();
console.log('Listening on: %j', address);
console.log(' -> that probably means: http://localhost:%d', address.port);
});
有人能看到什么吗?