热重装不会重新加载

时间:2016-12-19 11:57:30

标签: javascript reactjs express webpack redux

我有以下热重新加载配置:

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);
});

有人能看到什么吗?

0 个答案:

没有答案